@use "../../base";

/// @access private
@mixin styles {
  .govuk-select {
    @include base.govuk-font($size: 19, $line-height: 1.25);

    box-sizing: border-box;

    // This min-width was chosen because:
    // - it makes the Select wider than it is tall (which is what users expect)
    // - 11.5em matches the 'length-10' variant of the input component
    // - it fits comfortably on screens as narrow as 240px wide
    min-width: 11.5em;
    max-width: 100%;
    height: base.govuk-px-to-rem(40px);
    padding: base.govuk-spacing(1);
    border: base.$govuk-border-width-form-element solid;
    border-color: base.govuk-functional-colour(input-border);

    // Default user agent colours for selects can have low contrast,
    // and may look disabled (#2435)
    color: base.govuk-functional-colour(text);
    background-color: base.govuk-colour("white");

    &:focus {
      @include base.govuk-focused-form-input;
    }

    &:disabled {
      opacity: 0.5;
      color: inherit;
      cursor: not-allowed;
    }
  }

  .govuk-select--error {
    border-color: base.govuk-functional-colour(error);

    &:focus {
      border-color: base.govuk-functional-colour(input-border);
    }
  }
}