/* ==========================================================================
   Config
   ========================================================================== */
@use "sass:math";

$dropdown-item-padding: math.div($layout-spacing-base, 3) $layout-spacing-base !default;
$dropdown-section-padding: $layout-spacing-base * 0.75 !default;
$dropdown-hover-background: $neutral-lightest !default;
$dropdown-status-circle-width-height: 15px !default;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-dropdown-gc,
.gui-dropdown__wrapper {
  position: relative;
  display: inline-flex;
  overflow: hidden;

  + .gui-dropdown-gc {
    margin-left: $layout-spacing-base;
  }
}

.gui-dropdown__content,
.gui-dropdown__section,
.gui-dropdown__header,
.gui-dropdown__footer {
  *:first-child {
    margin-top: 0;
  }

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

.gui-dropdown-gc.gui-is-active.gui-auto-top,
.gui-is-active.gui-auto-top .gui-dropdown__wrapper {
  position: static;
}

.gui-dropdown-gc.gui-is-active {
  overflow: visible;
}

.gui-dropdown__trigger,
.gui-dropdown__action {
  background: none;
  padding: 0;
  border: 0;
  outline: none;
}

.gui-dropdown__header {
  display: flex;
  align-items: center;

  h3 {
    margin: 0 auto 0 0;
  }
}

.gui-dropdown__header,
.gui-dropdown__section,
.gui-dropdown__footer {
  margin-bottom: $dropdown-section-padding;
}

.gui-dropdown__content {
  position: absolute;
  top: -999em;
  left: 0;
  margin: $layout-spacing-base * 0.25 0;
  opacity: 0;
  background: white;
  z-index: 2;
  padding: $layout-spacing-base * 0.75;
}

.gui-dropdown__content.gui-is-active {
  opacity: 1;
  top: 100%;
  animation: dropdownAnimation 750ms;
  animation-fill-mode: forwards;

  .gui-auto-top > & {
    position: fixed;
  }
}

.gui-dropdown__content.gui-is-active.gui-dropdown__content--no-transform {
  animation: dropdownAnimationNoTransform 750ms;
  animation-fill-mode: forwards;
}

.gui-dropdown__action {
  display: block;
  white-space: nowrap;
  text-align: left;
  padding: $dropdown-item-padding;
  width: 100%;
  text-overflow: ellipsis;
  overflow-x: hidden;

  &:hover,
  &:focus {
    color: $neutral-dark;
    background: $dropdown-hover-background;
    outline: none;
  }

  .gui-status-indicator {
    position: relative;

    .gui-status-indicator__circle {
      position: relative;
      z-index: 2;
      width: $dropdown-status-circle-width-height;
      height: $dropdown-status-circle-width-height;
    }

    &::after {
      content: "";
      display: block;
      width: 2px;
      bottom: -$layout-spacing-base;
      position: absolute;
      top: 10px;
      left: 6px;
      background: #e6eaed;
    }
  }

  &:last-child {
    .gui-status-indicator::after {
      display: none;
    }
  }
}

.gui-dropdown__action-group {
  padding: $layout-spacing-base * 0.25 0;

  + .gui-dropdown__action-group {
    border-top: 1px solid $neutral-light;
  }
}

.gui-dropdown__action-link {
  color: $neutral-dark;
  text-decoration: none;
  overflow: auto;

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

.gui-dropdown__trigger-wrapper {
  display: inline-block;
}

/* ==========================================================================
   Modifiers
   ========================================================================== */
.gui-dropdown-gc--block,
.gui-dropdown__content--full {
  width: 100%;
}

.gui-dropdown__content--collapse {
  padding: 0;

  .gui-dropdown__header,
  .gui-dropdown__section,
  .gui-dropdown__footer {
    margin: 0;
    padding: $dropdown-section-padding;

    + .gui-dropdown__header,
    + .gui-dropdown__section,
    + .gui-dropdown__footer {
      padding-top: 0;
    }
  }
}

.gui-dropdown__content--top.gui-is-active {
  top: auto;
  bottom: 100%;
  margin-bottom: 10px;
}

.gui-dropdown__content--fix-right.gui-is-active {
  top: 0;
}

.gui-dropdown__content--centre.gui-is-active {
  animation: dropdownCentreAnimation 750ms;
}

.gui-dropdown__content--noborder {
  background: white;
  border: none;
  box-shadow: none;
}

.gui-dropdown__content--centre {
  left: 50%;
  transform: translateX(-50%);
}

.gui-dropdown__content--right {
  right: 0;
  left: auto;
}

.gui-dropdown__content--fix-right {
  margin: 0 0 0 $layout-spacing-base * 0.5;
  padding: 0 $layout-spacing-base * 0.5;
  left: 100%;
}

.gui-dropdown__content--top {
  top: auto;
  bottom: -999em;
}

.gui-dropdown__action-group--horizontal {
  display: flex;
}

.gui-dropdown__content--collapse .gui-dropdown__header--collapse,
.gui-dropdown__header--collapse,
.gui-dropdown__action-group--collapse {
  padding: 0;
}

.gui-dropdown__action--danger {
  color: $primary-red;

  &:hover,
  &:focus {
    background: $primary-red;
    color: white;
  }
}

.gui-dropdown__action--noBg {
  &:hover,
  &:focus {
    background: none;
  }
}

.gui-dropdown__action--overflow {
  overflow: visible;
}

.gui-dropdown__action--icon-only {
  line-height: 0;

  .gui-dropdown__action-group--horizontal & {
    padding: 0 $layout-spacing-base * 0.5 0 $layout-spacing-base * 0.25;
  }
}

.gui-dropdown__action-group--bordered .gui-dropdown__action {
  border-bottom: 1px solid $neutral-light;
  border-top: 1px solid $neutral-light;

  + .gui-dropdown__action {
    border-top: 0;
  }
}

.gui-dropdown__action--selected,
.gui-dropdown__action--selected:hover {
  background: $dropdown-hover-background;
  color: $primary-blue;

  .gui-status-indicator {
    color: $primary-blue;
  }
}

.gui-dropdown__action--disabled {
  opacity: 0.5;
}

.gui-dropdown__trigger-wrapper--select {
  width: 100%;

  .gui-button {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .gui-icon {
    margin-left: auto;
  }

  &.gui-dropdown__trigger-wrapper--top {
    .gui-dropdown-gc.gui-is-active > & .gui-icon {
      transform: rotateX(180deg);
    }
  }
}