@use "../../variables" as *;
@use "../../mixins" as *;
@use "../../utils" as *;

.mie.select {
  &.transparent {
    --mie-select-bg-main: transparent;
  }

  &.bordered {
    > .content > .base {
      border: 0.1rem solid mvar("select.border-bg");
    }
  }

  > .content {
    // Base button content trigger
    > .base {
      background-clip: padding-box;

      // prettier-ignore
      background-image:
                linear-gradient(
                    mvar("select.bg.overlay"),
                    mvar("select.bg.overlay")
                ),
                linear-gradient(
                    mvar("select.bg.main"),
                    mvar("select.bg.main")
                );

      @include flex(row, space-between, center);
      border-radius: mvar("select.rounded");
      height: mvar("select.h");
      transition: outline 0.2s ease;

      outline-color: mvar("select.bg.outline");
      outline-style: solid;
      outline-width: 0;

      &:hover {
        cursor: pointer;
      }

      > .header {
        padding: 0 mvar("select.p");
        @include flex(column, center);
        position: relative;
        height: 100%;
        flex: 1;

        > .label {
          transition: 300ms ease font-size;
          pointer-events: none;
          user-select: none;

          font-size: mvar("select.value.fs");
          color: mvar("select.label.fg");
          font-weight: 500;
        }

        > .value {
          margin-top: mvar("select.value.m");
          font-size: mvar("select.value.fs");
          color: mvar("select.value.fg");
        }
      }

      > .right {
        @include flex(row, flex-end, center);

        > .arrow {
          margin-left: mvar("select.indicator.r");
          margin-right: mvar("select.p");

          transition: transform 0.2s ease-in-out;
          color: mvar("select.value.fg");
        }
      }

      &.selected {
        > .header {
          > .label {
            top: mvar("select.label.top.active");
            font-size: mvar("select.label.fs");
            font-weight: 400;
          }
        }
      }

      &.opened {
        > .right {
          > .arrow {
            transform: rotate(180deg);
          }
        }
      }
    }
  }
}
