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

$dropdown-menu-caret-margin: $layout-spacing-base * 0.5 !default;
$dropdown-menu-icon-size: $typo-size-small !default;
$dropdown-menu-link-padding: math.div($layout-spacing-base, 3)
  math.div($layout-spacing-base, 1) !default;
$dropdown-menu-font-size: $typo-size-base !default;
$dropdown-menu-font-weight: $typo-weight-roman !default;
$dropdown-menu-font-color: $color-text-base !default;

/* ==========================================================================
   Styles
   ========================================================================== */

@keyframes dropdownAnimation {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -15, 0, 1);
  }

  5.81% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.748, 0, 1);
  }

  11.61% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.799, 0, 1);
  }

  17.42% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.348, 0, 1);
  }

  23.12% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.137, 0, 1);
  }

  30.33% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.468, 0, 1);
  }

  37.44% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.489, 0, 1);
  }

  44.54% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.094, 0, 1);
  }

  51.65% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.244, 0, 1);
  }

  80.28% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.028, 0, 1);
  }

  100% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}

@keyframes dropdownAnimationNoTransform {
  0% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -15, 0, 1);
  }

  5.81% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.748, 0, 1);
  }

  11.61% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -1.799, 0, 1);
  }

  17.42% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.348, 0, 1);
  }

  23.12% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.137, 0, 1);
  }

  30.33% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.468, 0, 1);
  }

  37.44% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.489, 0, 1);
  }

  44.54% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.094, 0, 1);
  }

  51.65% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.244, 0, 1);
  }

  80.28% {
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.028, 0, 1);
  }

  100% {
    transform: none;
  }
}

.gui-dropdown .gui-dropdown-menu {
  display: none;
  opacity: 1;
  transition: opacity;
  background-clip: padding-box;
  list-style: none;
  background-color: #fff;
  left: 0;
  float: left;
  margin: 2px 0 0;
  min-width: 160px;
  padding: 5px 0;
  position: absolute;
  text-align: left;
  top: 100%;
  z-index: 1000;
  border: 1px solid #e0e5ea;
  border-radius: 4px;
}

.gui-dropdown.gui-open .gui-dropdown-menu {
  display: block;
}

.gui-dropdown,
.gui-dropdown.gui-is-active {
  svg path {
    fill: white;
  }

  button {
    outline: none;
  }

  .gui-dropdown-menu {
    animation: dropdownAnimation 750ms;
    animation-fill-mode: forwards;
  }
}

.gui-dropdown.gui-full-width {
  width: 100%;

  .gui-dropdown-menu__button,
  .gui-dropdown-menu {
    width: 100%;
  }

  .gui-dropdown-menu__caret,
  .gui-dropdown-menu__down {
    margin-left: auto;
  }
}

.gui-dropdown-menu__button--outline,
.gui-dropdown-menu__button--link {
  svg path {
    .gui-dropdown & {
      fill: $neutral-dark;
    }

    .gui-dropdown.gui-is-active & {
      fill: $primary-blue;
    }
  }
}

.gui-dropdown .gui-dropdown-item__tick {
  span {
    vertical-align: middle;
  }

  svg path {
    fill: $primary-blue;
  }

  & + .gui-dropdown__item--name {
    color: $primary-blue;
  }
}

.gui-dropdown-menu__button {
  display: flex;
  align-items: center;
}

.gui-dropdown .gui-dropdown-menu__button-disabled {
  background: $neutral-lightest;
  border: 1px solid $neutral-light;
  color: $neutral-base;

  &:hover {
    text-decoration: none;
    border: 1px solid $neutral-light;
  }

  svg path {
    fill: $neutral-base;
  }
}

.gui-dropdown-menu__caret,
.gui-dropdown-menu__down {
  display: inline-flex;
  margin-left: $dropdown-menu-caret-margin;
}

.gui-dropdown-menu {
  line-height: $typo-line-height-base;

  &.gui-align-right {
    left: auto;
    right: 0;
  }

  .gui-open & {
    display: block;
    opacity: 1;
    transition: opacity;
  }
}

/** Bootstrap styling **/
.gui-dropup,
.gui-dropdown {
  position: relative;
  display: inline-block;
}

.gui-dropdown {
  &.gui-is-hidden {
    > button {
      display: none;
    }
  }
}

.gui-dropdown-toggle:focus {
  outline: 0;
}

.gui-dropdown-toggle {
  i {
    font-size: $dropdown-menu-icon-size;
    margin-right: 3px;
    vertical-align: baseline;
  }

  &:hover {
    cursor: pointer;
  }
}

/** Custom **/
.gui-dropdown__link,
.gui-dropdown-menu a.gui-dropdown__link {
  display: block;
  padding: $dropdown-menu-link-padding;
  text-decoration: none;
  cursor: pointer;
  color: $dropdown-menu-font-color;
  font-weight: $dropdown-menu-font-weight;
  font-size: $dropdown-menu-font-size;
  background: none;
  border: 0;
  appearance: none;
  text-align: left;
  width: 100%;

  &:hover {
    color: #111823;
    background: #f9f9f9;
  }

  &:focus {
    outline: none;
  }
}

.gui-dropdown-menu .gui-active .gui-dropdown__link {
  color: $color-link-base;

  &:hover {
    color: $color-link-hover;
  }
}

.gui-dropdown__separator {
  background-color: rgba($color-border-base, 0.5);
  height: 1px;
  margin: 3px 0;
}

.gui-dropdown__menu {
  li a {
    color: #6f7c82;
    text-decoration: none;
    font-size: $dropdown-menu-icon-size;
  }

  li.gui-disabled a {
    opacity: 0.4;
  }

  a[role="menuitem"]:focus {
    outline: none;
  }
}

.gui-dropdown__additional,
.gui-dropdown__title {
  display: flex;

  .gui-dropdown__item--name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .gui-dropdown__item--additional {
    display: block;
    margin-left: auto;
    justify-self: end;
    color: $neutral-base;
    flex-shrink: 0;
    padding-left: 5px;
  }
}

.gui-dropdown__item--danger .gui-dropdown__link {
  color: $primary-red;

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

.gui-dropdown__title.gui-dropdown__link {
  &:hover {
    background: white;

    svg path {
      fill: $primary-blue;
    }
  }

  svg path {
    fill: $neutral-dark;
  }

  .gui-dropdown__item--name {
    color: $neutral-base;
  }
}

.gui-dropdown__avatar {
  border-top: 1px solid $color-border-base;
}

.gui-dropdown__link--highlighted {
  background: $neutral-lightest;
}