@use '@zywave/zui-sass-scripts' as *;

:host {
  display: inline-flex;
  border-radius: var(--zui-select-border-radius, #{rem(4)});

  label {
    display: inline-flex;
    margin: rem(2) 0;
    padding-right: rem(15);
    font-weight: 700;
    cursor: pointer;
    color: inherit;
  }

  div {
    position: relative;
    width: 100%;

    select {
      display: inline-block;
      width: 100%;
      height: rem(42);
      padding: 0 1em;
      padding-right: rem(35);
      background-color: #fff;
      border: rem(1) solid var(--zui-gray-200);
      border-radius: var(--zui-select-border-radius, #{rem(4)});
      outline: none;
      font: inherit;
      cursor: pointer;
      color: inherit;
      transition: border 100ms ease-in-out, box-shadow 100ms ease-in-out;
      -webkit-appearance: none;
      -moz-appearance: none;

      &[readonly] {
        pointer-events: none;

        + zui-icon {
          display: none;
        }
      }

      &.placeholder-selected {
        color: var(--zui-gray-300);
      }

      option {
        padding: 0.5em 0;
        color: var(--zui-gray-800);

        &[value=''] {
          color: var(--zui-gray-300);
        }

        &:disabled {
          background-color: var(--zui-gray-100);
          cursor: not-allowed;
          color: var(--zui-gray);
        }
      }

      &:hover {
        border-color: var(--zui-gray-300);
      }

      &:focus {
        border-color: var(--zui-blue-400);
        box-shadow: 0 0 0 rem(1) var(--zui-blue-400);
      }

      &::-ms-expand {
        display: none;
      }

      &::-ms-value {
        background: transparent;
        color: var(--zui-gray-700);
      }
    }

    zui-icon {
      position: absolute;
      top: calc(50% - #{rem(12)});
      right: rem(10);
      color: var(--zui-gray-600);
      pointer-events: none;
    }
  }
}

:host(.xsmall) {
  div {
    select {
      max-width: rem(65);
    }
  }
}

:host(.small) {
  div {
    select {
      max-width: rem(200);
    }
  }
}

:host(.medium) {
  div {
    select {
      max-width: rem(300);
    }
  }
}

:host(.large) {
  div {
    select {
      max-width: rem(400);
    }
  }
}

:host([multiple]) {
  div {
    select {
      height: 100%;
      padding: rem(1);

      &:focus {
        margin-top: 0;
        padding: 0;
        border: rem(2) solid var(--zui-blue-400);
      }
    }

    zui-icon {
      display: none;
    }
  }
}

:host([disabled]) {
  div {
    select {
      background-color: var(--zui-gray-100);
      cursor: not-allowed;
      color: var(--zui-gray);

      &:hover {
        border: rem(1) solid var(--zui-gray-200);
      }

      option {
        color: var(--zui-gray);
      }
    }
  }
}