@import "../colors";
@import "../globals";
@import "../mixins";
@import "../input/config";
@import "./config";

.dropdown {
  position: relative;
  &:not(.active) {
    > .values {
      max-height: 0;
      visibility: hidden;
    }
  }
  &.active {
    > .label, > .value {
      opacity: .5;
    }
    > .values {
      max-height: $dropdown-overflow-max-height;
      visibility: visible;
      box-shadow: $zdepth-shadow-1;
    }
  }
  &:not(.up) > .values {
    top: 0;
    bottom: auto;
  }
  &.up > .values {
    top: auto;
    bottom: 0;
  }
  &.disabled {
    pointer-events: none;
    cursor: normal;
  }
}

.value {
  > input {
    cursor: pointer;
  }
  &:after {
    $size: ($input-field-height / 7);
    $border: $size solid transparent;
    position: absolute;
    top: 50%;
    right: $input-chevron-offset;
    width: 0;
    height: 0;
    pointer-events: none;
    content: "";
    border-top: $size solid $input-text-bottom-border-color;
    border-right: $border;
    border-left: $border;
    transition: transform $animation-duration $animation-curve-default;
  }
}

.field {
  position: relative;
  padding: $input-padding 0;
  cursor: pointer;
  &.errored {
    padding-bottom: 0;
    > .label {
      color: $input-text-error-color;
    }
    > .templateValue {
      border-bottom: 1px solid $input-text-error-color;
    }
    > .label > .required {
      color: $input-text-required-color;
    }
  }
  &.disabled {
    pointer-events: none;
    cursor: normal;
    > .templateValue {
      border-bottom-style: dotted;
      opacity: .7;
    }
  }
}

.templateValue {
  position: relative;
  min-height: $input-field-height;
  padding: $input-field-padding 0;
  color: $color-text;
  background-color: $input-text-background-color;
  border-bottom: 1px solid $input-text-bottom-border-color;
}

.label {
  position: absolute;
  top: $input-focus-label-top;
  left: 0;
  font-size: $input-label-font-size;
  line-height: $input-field-font-size;
  color: $input-text-label-color;
  .required {
    color: $input-text-required-color;
  }
}

.error {
  margin-bottom: - $input-underline-height;
  font-size: $input-label-font-size;
  line-height: $input-underline-height;
  color: $input-text-error-color;
}

.values {
  @include no-webkit-scrollbar;
  position: absolute;
  z-index: $z-index-high;
  width: 100%;
  overflow-y: auto;
  list-style: none;
  background-color: $dropdown-color-white;
  border-radius: $dropdown-value-border-radius;
  transition-timing-function: $animation-curve-default;
  transition-duration: $animation-duration;
  transition-property: max-height, box-shadow;
  > * {
    position: relative;
    padding: $unit;
    overflow: hidden;
    cursor: pointer;
    &:hover:not(.disabled) {
      background-color: $dropdown-value-hover-background;
    }
    &.selected {
      color: $dropdown-color-primary;
    }
    &.disabled {
      color: $dropdown-color-disabled;
      cursor: not-allowed;
    }
  }
}