@import "./form";

.cobalt- {
  &SelectField {
    $self: &;

    @include form-field-container;

    position: relative;

    &__Input {
      @include form-input-base($self);

      @apply c-pr-lg c-cursor-pointer;

      line-height: 20px;

      background-color: theme("semanticStateColor.interactive.DEFAULT");
      background-size: 10px;
      background-position: calc(100% - 12px) 19px;
      background-repeat: no-repeat;

      appearance: none;

      &:not([readonly]):not([disabled]) {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='6 8 12 8' fill='%2000000'><path d='M12 15.686 6.22 9.906 7.28 8.844 12 13.565 16.72 8.845 17.78 9.905z' /></svg>");
      }

      // select placeholder
      &:invalid {
        @apply c-text-onSurfaceVariant;
        opacity: 0.7;
      }

      &:hover,
      &:focus {
        background-color: theme("semanticStateColor.interactive.hover");
      }

      &:active {
        background-color: theme("semanticStateColor.interactive.press");
      }

      &[disabled],
      &[disabled]:hover,
      &[disabled]:focus,
      &[disabled]:active {
        opacity: 1;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='6 8 12 8' fill='rgba(0,0,0,0.2)'><path d='M12 15.686 6.22 9.906 7.28 8.844 12 13.565 16.72 8.845 17.78 9.905z' /></svg>");
      }
    }
  }
}