@import "../../helpers";
.sf-select {
  position: relative;
  box-sizing: border-box;
  width: var(--select-width);
  height: var(--select-height, 4.25rem);
  padding: 0 var(--form-field-padding-x);
  background-color: var(--form-field-background);
  color: var(--select-color, var(--c-text));
  cursor: default;
  display:table-cell;
  vertical-align:middle;
  select {
    font-size: inherit;
    height: var(--select-height, 4.25rem);
    -webkit-appearance: none;
  }
  &__label {
    position: absolute;
    top: var(--select-label-top, 36%);
    left: var(--select-label-left, 0);
    padding: 0 var(--form-field-padding-x);
    color: var(--select-label-color, var(--c-secondary-variant));
    transition: var(
      --select-label-transition,
      top 150ms linear,
      font-size 150ms linear
    );
    @include font(
      --select-label-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1,
      var(--font-family--primary)
    );
    &::after {
      content: var(--select-label-required);
      color: var(--select-label-color, var(--c-text));
    }
  }
  &__dropdown {
    width: 100%;
    height: 1.625rem;
    margin: 0 0 var(--spacer-2xs) 0;
    // overflow-y: scroll;
    box-shadow: none;
    color: var(--select-dropdown-color, var(--c-secondary-variant));
    background: var(--form-field-background);
    @include border(
      --select-dropdown-border,
      0 0 0 0,
      solid,
      var(--c-secondary)
    );
  }
  &__option {
    background: var(--select-option-background, var(--c-white));
    font-size: inherit;
  }
  .sf-select__dropdown:active {
    --select-label-color: var(--c-text-muted);
    --select-dropdown-border-color: var(--c-primary);
    --select-dropdown-color: var(--c-link);
  }
  &__label .sf-select__dropdown:active {
    top: 0;
  }
  &::-ms-expand {
    display: none;
  }
  &__error-message {
    color: var(--select-error-message-color, var(--c-danger));
    min-height: var(
      --select-error-message-height,
      calc(var(--font-size--xs) * 1.2)
    );
  }
  &--underlined {
    --select-dropdown-border-width: 0 0 1px 0;
    --select-border-width: 0 0 1px 0;
    --select-border-color: var(--c-light);
  }
  &.is-selected {
    --select-label-top: 10px;
    --select-label-font-size: var(--font-size--xs);
    --select-dropdown-color: var(--c-secondary-variant);
  }
  &.is-invalid {
    --select-dropdown-border-color: var(--c-danger);
  }
  &.is-disabled, select[disabled] {
    --select-dropdown-color: var(--c-text-disabled);
    --select-dropdown-border-color: var(--c-text-disabled);
    --select-label-color: var(--c-text-disabled);
    color: var(--c-text-disabled);
    .sf-select__dropdown:active {
      --select-dropdown-border-color: var(--c-text-disabled);
    }
  }
  &.is-required {
    --select-label-required: " *";
  }
}