@import './button.module.scss';
@import './global/variables.scss';
@import './global/mixins.scss';

.dropdown {
  position: relative;
  cursor: pointer;

  &.has-icon,
  &.btn-with-icon,
  &.has-badge {
    padding-right: 30px;
  }

  &:global(.btn-dropdown-gear) {
    &:focus i {
      transform: rotate(180deg);
      transition: 0.5s;
    }
  }

  &:focus,
  .dropdown-content:focus {
    outline: none;
  }

  &:focus > .dropdown-content {
    h1,
    h2,
    h3,
    h4 {
      text-decoration: underline;
    }
  }

  &.is-active .dropdown-menu {
    top: 100%;
    z-index: $dropdown-menu-z-index;
    opacity: 1;
    visibility: visible;
  }
}

.dropdown-block {
  display: inline-flex;

  &::after {
    @include icon-font-base;
    content: $icon-caret;
    font-size: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: $scale-base-down-02;
  }
}

.dropdown-content *:not(.dropdown-menu) {
  margin-bottom: 0;
}

// in styles/global/tables, this is set for table headers
.is-left .dropdown-menu {
  right: 0;
  left: auto;
  letter-spacing: 0;
  text-transform: none;
}

.dropdown-menu {
  @include dropdown-shadow;
  position: absolute;
  top: 50%;
  left: 0;
  display: inline-block; // only needed to override client css
  min-width: 180px;
  padding: $scale-base-down-01 0;
  margin: 1px -1px;
  overflow: hidden;
  cursor: default;
  background: $slate-02;
  border: 1px solid $slate-10;
  border-radius: $border-radius;
  opacity: 0;
  visibility: hidden;
  transition: top 0.3s, opacity 0.3s;
}

// used by tiara in the account menu and switch subuser banner
.dropdown-menu-account {
  width: 175px;
  margin-right: 2px;
  margin-left: 2px;
}

.dropdown-menu-right-aligned {
  right: 0;
  left: inherit;
}

.dropdown-block .dropdown-menu {
  right: 20px;
  left: inherit;
}

.dropdown-menu {
  .input-checkbox-wrap,
  :global(.input-checkbox-wrap) {
    padding-left: $scale-base;
    margin-bottom: $scale-base;
    text-align: left;

    &:first-child {
      span {
        margin-left: 3px;
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.dropdown-menu .input-checkbox-label:before {
  vertical-align: sub;
}

.dropdown-menu .label {
  margin-left: $scale-base-down-03;
}

.dropdown-link {
  display: block;
  padding: $scale-base-down-01 $scale-base-up-03;
  font-size: $scale-base-up-01;
  line-height: $scale-base-up-03;
  color: $slate-80;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  &:hover,
  &:focus {
    color: $slate;
    background: $slate-10;
    outline: none;
  }

  :global .sg-icon {
    margin-right: $scale-base;
  }

  .sg-icon {
    margin-right: $scale-base;
  }
}

.dropdown-text {
  display: block;
  padding: $scale-base-down-01 $scale-base-up-06;
  font-size: $scale-base-up-01;
  line-height: $scale-base-up-03;
  text-align: left;
  white-space: nowrap;
}

.dropdown-item {
  margin: $scale-base-down-02 $scale-base-up-05;
}

.dropdown-input {
  width: 100%;
  padding: $scale-base-down-03 $scale-base-down-02;
  box-sizing: border-box;
}