@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' width='100' height='100' fill='%2000000'><polygon points='0,0 100,0 50,50'/></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' width='100' height='100' fill='rgba(0,0,0,0.2)'><polygon points='0,0 100,0 50,50'/></svg>");
      }
    }
  }
}