// RAMEN FORM SELECT COMPONENT
//
//
// Required Global Variables:
//
// $global-transition-speed
// $global-easing
//
//
// Required Component Variables:
//
// $form-select-background-color: Sets the background colour of the select
// $form-select-border: Sets the border of the select
// $form-select-background-focus: Sets the background of the select on focus
// $form-select-color: Sets the text colour of the select
// $form-select-font-size: Sets the font size of the select
// $form-select-padding: Sets the padding on the form select
// $form-select-arrow-svg: Base64 encoded url to the SVG check icon;
// $form-select-arrow-svg-size: Size of the arrow icon
// $form-select-error-border-color: Sets the error border colour of the select;
// $form-select-success-border-color: Sets the success border colour of the select;
//
//

@mixin form-select {
  background-color: $form-select-background-color;
  border: $form-select-border;
  display: block;
  position: relative;
  z-index: 1;

  // Hide native arrow in IE
  select::-ms-expand {
    display: none;
  }

  &.is-disabled {
    opacity: 0.5;
  }
}

@mixin form-select-arrow {
  background-image: $form-select-arrow-svg;
  background-position: center;
  background-repeat: no-repeat;
  background-size: $form-select-arrow-svg-size auto;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: toRems(50px);
  z-index: 2;
}

@mixin form-select-input {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  color: $form-select-color;
  cursor: pointer;
  font-size: $form-select-font-size;
  line-height: 1;
  padding: $form-select-padding;
  position: relative;
  transition: background-color $global-transition-speed $global-easing;
  width: 100%;

  &:focus {
    background-color: $form-select-background-focus;
  }

  &:disabled {
    cursor: default;
  }
}

@mixin form-select-error {
  border-color: $form-select-error-border-color;
}

@mixin form-select-success {
  border-color: $form-select-success-border-color;
}

.c-form-select {
  @include form-select;

  &:before {
    @include form-select-arrow;
  }

  &__input {
    @include form-select-input;
  }

  &.has-error {
    @include form-select-error;
  }

  &.has-success {
    @include form-select-success;
  }
}