@import '../shared/formfields.module.scss';

.select-field {
  @extend %form-field;
}

.tooltip-wrapper {
  @extend %tooltip-wrapper;
}

.tooltip {
  margin-left: auto;
}

.tooltip-icon {
  @extend %tooltip-icon;
}

.label {
  @extend %label;

  border-bottom: $border;
  padding-left: ru(1);
  padding-right: ru(1);
}

.select-wrapper {
  position: relative;

  &:after {
    width: 0;
    height: 0;
    border-left: ru(.25) solid transparent;
    border-right: ru(.25) solid transparent;
    border-top: ru(.25) solid color('primary-3');
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: ru(.5);
    z-index: 0;
    right: ru(.75);
    pointer-events: none;
  }
}

@-moz-document url-prefix() {
  .select-wrapper {
    select {
      -moz-appearance: none;
    }
  }
}

.select {
  @include typography-b-7(false);
  color: color('primary-3');

  border: 0;
  width: 100%;
  padding: ru(.5) ru(1);
  position: relative;
  background: transparent;
  -webkit-appearance: none;

  &:focus {
    outline: none;
  }

  &:invalid {
    @include typography-b-7();

    color: color('neutral-2');
  }

  &::-ms-expand {
    display: none;
  }
}

/* --  state:focus  -- */
.focused {
  @extend %focused;
}

/* --  state:error  -- */
.hasError {
  @extend %hasError;
}

/* -- Variants -- */
.card {
  border: 0;
  color: color('brand-2');

  .label {
    @include typography-a-8-bold;

    padding: ru(.5) ru(1) 0;
    border: 0;
    letter-spacing: 0.1px;
    color: color('neutral-2');
  }

  .select {
    color: color('brand-2');

    padding: ru(.25) ru(1);
    letter-spacing: .2px;
    pointer-events: all;

    &:invalid {
      @include typography-3(false);
      color: color('neutral-3');
    }
  }
}