@use "../../Sass/common/_variables";
@use "../../Sass/common/mixins";

.dropdown {
  position: relative;
}

.list {
  composes: list-reset from "../../Sass/common/_base.scss";

  @include mixins.transform(scaleY(0));
  @include mixins.transition(
    transform variables.$animation-fast cubic-bezier(0.19, 1, 0.22, 1)
  );
  @include mixins.transform-origin(center, top);
  position: absolute;
  min-width: 100%;
  overflow: hidden;
  z-index: 9999;
  box-sizing: border-box;
  background: #fff;
  border-radius: variables.$radius-small;
  border: 1px solid rgba(variables.$grey, 0.4);
  box-shadow: 0px 3px 15px rgba(variables.$dark, 0.15);
  &.is-open {
    transform: scaleY(1);
    overflow-y: auto;
  }
}

.btn--dropdown {
  composes: btn from "../../Sass/common/_buttons.scss";
  composes: btn-primary from "../../Sass/common/_buttons.scss";
  composes: btn-transparent from "../../Sass/common/_buttons.scss";
  font-size: variables.$font-size-mid-small;
  text-align: left;
  background: variables.$text-light;
  color: variables.$text-dark;
  border: 1px solid variables.$field-border;
  position: relative;
  &:hover,
  &:focus {
    background: variables.$text-light;
    color: variables.$text-dark;
    border: 1px solid variables.$color-primary;
  }
  svg {
    width: 30px;
    height: 30px;
    width: 20px;
    height: 20px;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 10px;
    top: 15px;
    fill: variables.$dark-lighter;
  }
  &:disabled {
    background: variables.$text-light !important;
    color: variables.$text-dark;
    opacity: 0.3;
  }
}

.btn--option {
  composes: btn from "../../Sass/common/_buttons.scss";
  composes: btn-transparent from "../../Sass/common/_buttons.scss";
  composes: btn--small from "../../Sass/common/_buttons.scss";

  width: 100%;
  color: variables.$text-dark;

  &:hover,
  &:focus {
    color: variables.$dropdown-hover-color;
  }

  &.is-selected {
    color: variables.$color-primary;
  }
}

.myDataDropdown {
  text-align: left;
}