@import 'main';

$dropdown_icon_size: 24px;
$dropdown_input_width: 288px;
$dropdown_panel_btn_size: 12px;

.dropdown {
  display: inline-block;
}

.drop-icon, .clear-icon {
  display: inline-block;
  cursor: pointer;
  font-size: $dropdown_icon_size;
  vertical-align: middle;
  @include transition();
}

.drop-icon {
  &, i {
    color: $color_dark;
  }

  &.opened {
    @include transform(rotate(-180deg));
    &, i {
      color: $color_grey;
    }
  }
}

.clear-icon {
  display: none;
  right: 32px;
}

.field {
  min-width: $dropdown_input_width;

  .select-input {
    @include box-shadow(none);
    padding-right: 36px;

    &:disabled ~ .drop-icon {
      &, i {
        color: $color_grey;
      }
    }

    &.clearable {
      padding-right: 60px;

      & ~ .clear-icon {
        display: inline-block;
      }
    }

    &:not(:disabled) {
      border: 1px solid $color_grey;
    }
  }

  .drop-icon {
    right: 8px;
  }

  .select-header {
    padding: 0 8px;
    height: 100%;
  }
}

.panel {
  position: fixed;
  top: -1000%;
  height: auto;
  background-color: $color_paper;
  visibility: hidden;
  opacity: 0;
  @include box-shadow($box_shadow_paper_hover);
  @include manual-transition(opacity 200ms ease-in, visibility 350ms ease-in);

  &.vertical {
    &-top {
      margin-bottom: 32px;
    }

    &-bottom {
      margin-top: 32px;
    }
  }

  &-title, &-clean {
    font-size: $dropdown_panel_btn_size;
    letter-spacing: 0.4px;
    color: $color_dark;
    padding: 8px 16px;
  }

  &-clean {
    border-top: 1px solid $color_light;
    width: 100%;
    cursor: pointer;
    background-color: $color_paper;
  }

  &-title, &-item, &-clean {
    padding: 8px 12px;
    opacity: 0;
    @include manual-transition(padding 300ms ease-in-out, opacity 250ms linear);
  }

  &-title {
    background-color: $color_light;
    padding: 3px 16px;
    margin-bottom: 1px;
  }

  &-item {
    cursor: pointer;

    &.active {
      background-color: $color_light;
      color: $color_primary;

      .simple-panel &:after {
        bottom: 0 !important;
      }
    }
  }
}

.selected-text {
  color: $color_primary;
}

.active {
  .field {
    z-index: 3;
    @include box-shadow($box_shadow_paper_hover);
    .select-input {
      border-color: transparent;
    }
  }

  .select-panel {
    top: 32px;
  }

  .panel-vertical {
    &-top .select-input {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border-top: 1px solid $color_light;
    }

    &-bottom .select-input {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom: 1px solid $color_light;
    }
  }
}

.panel-active {
  position: absolute !important;
  visibility: visible;
  opacity: 1;
  z-index: 100;
  height: auto;
  min-width: $dropdown_input_width;

  &.vertical {
    .panel-vertical-top {
      bottom: 100%;
      top: auto !important;
    }

    .panel-vertical-bottom {
      top: 100%;
    }
  }

  .panel-title {
    opacity: 1;
  }

  .panel-item, .panel-clean {
    opacity: 1;
  }

  &.left {
    right: 0;
  }

  &.right {
    left: 0;
  }

  &.full-width {
    min-width: auto;
    width: 100%;
  }

  &.autosize {
    min-width: auto !important;
    width: auto !important;
  }
}

.simple-panel .panel-item:not(:last-child):after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 12px;
  right: 12px;
  height: 1px;
  background-color: $color_light;
}

.suggesting-active {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.loader {
  font-size: 40px;
  fill: $color_dark;
}

.footer {
  border-top: 1px solid $color_light;
  margin-top: 1px;
  padding: 8px;
}

.dropdowns-container {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  opacity: 0;
  z-index: -1;

  &.opened {
    z-index: 15500;
    opacity: 1;
  }
}