@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/type";
@import "~@cultureamp/kaizen-component-library/styles/layout";
@import "~@cultureamp/kaizen-component-library/styles/border";
@import "~@cultureamp/kaizen-component-library/styles/mixins/forms";

.dropdown {
  position: relative;
  background: #fff;
  border: solid 1px $ca-border-color;
  border-radius: $ca-border-radius;
  padding: $ca-grid / 2;
  color: $kz-color-wisteria-800;
  width: 100%;
}

.buttonReset {
  appearance: none;
  display: inline;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: none;
}

.dropdownButton {
  @include ca-type-ideal-button;
  @include ca-inherit-baseline;
  composes: buttonReset;
  cursor: pointer;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: space-between;
}

.dropdownControlAction {
  @include ca-type-ideal-control-action;
  @include ca-inherit-baseline;

  &:hover {
    text-decoration: none;
  }
}

.dropdownIcon {
  box-sizing: border-box;
  width: $ca-grid;
  height: $ca-grid;
  padding: 2px;
  color: $kz-color-wisteria-800;
}

.dropdownLabel {
  // @include ca-type-ideal-button;
  top: 0;
  color: $kz-color-wisteria-800;

  &:hover {
    text-decoration: none;
    border: 0;
  }
}

.dropdownIcon + .dropdownLabel {
  @include ca-margin($start: calc(#{$ca-grid} / 2 - 2px));
}

// If you would like the dropdown icon to only be visible when a certain area is hovered,
// have you hover area use (or compose) the `dropdownHoverArea` class. The label will
// always be visible.
.dropdownHoverArea {
  .dropdownIcon {
    opacity: 0;
    &.isOpen,
    &:focus {
      opacity: 1;
    }
  }
  &:hover .dropdownIcon {
    opacity: 1;
  }
}

.chevronIcon {
  position: relative;
  top: 4px;
  color: $kz-color-wisteria-800;
}

.menuContainer {
  position: absolute;
  width: 100%;
  z-index: $ca-z-index-dropdown;
  right: 0;
  top: $ca-grid * 2.1;

  [dir="rtl"] & {
    right: auto;
    left: 0;
  }
}

.reversedColor {
  color: $kz-color-white;
}