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

zui-select {
  @include undefined-element {
    display: inline-block;
    height: rem(42);
    overflow: hidden;
    margin-left: rem(1);
    padding: 0 rem(16);
    background: #fff;
    border: rem(1) solid var(--zui-gray-200);
    border-radius: rem(4);
    color: inherit;
    transition: border 100ms ease-in-out, box-shadow 100ms ease-in-out;
    box-sizing: border-box;

    zui-option {
      display: block;
      line-height: rem(42);
    }

    &[placeholder] {
      &::before {
        display: block;
        content: attr(placeholder);
        line-height: rem(42);
        color: var(--zui-gray-300);
      }

      zui-option {
        display: none;
      }
    }
  }
}

zui-select[multiple] {
  @include undefined-element {
    padding: 0;
    background: var(--zui-gray-100);

    zui-option {
      margin-right: rem(16);
      padding: rem(8) rem(16);
      background: #fff;
      line-height: normal;
    }

    &[placeholder] {
      &::before {
        display: block;
        content: attr(placeholder);
        margin-right: rem(16);
        padding: rem(8) rem(16);
        background-color: #fff;
        line-height: normal;
        color: var(--zui-gray-300);
      }

      zui-option {
        display: block;
      }
    }
  }
}

zui-select-dropdown {
  @include undefined-element {
    @extend %input-base;

    display: block;
    height: rem(42);
    overflow: hidden;

    zui-option {
      display: none;
    }

    &[placeholder] {
      &::before {
        display: block;
        content: attr(placeholder);
        line-height: rem(42);
        color: var(--zui-gray-300);
      }

      zui-option {
        display: none;
      }
    }

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

    &.is-invalid {
      border: rem(1) solid var(--zui-red);
      box-shadow: 0 0 0 rem(1) var(--zui-red);
    }

    &.is-valid {
      border: rem(1) solid var(--zui-green-400);
      box-shadow: 0 0 0 rem(1) var(--zui-green-400);
    }
  }
}