/*
  Context Menu Styles
  ------------------------------------------------------------------------------
*/

$context-menu--toggle-size: 24px;
$context-menu--arrow-size: 8px;

.context-menu {
  display: flex;
  align-items: center;
}

.context-menu--boost-z {
  position: relative;
  z-index: 9999 !important;
}

.context-menu--container {
  position: relative;

  .button {
    position: relative;
    border: 0;
    border-radius: $radius-small;
    background-color: $g2-kevlar;
    color: $g13-mist;
    transition: color 0.25s ease, background-color 0.25s ease;
    outline: none;
  
    &:hover {
      cursor: pointer;
      color: $g20-white;
    }
  
    &.active {
      color: $g20-white;
    }
  }
}


.context-menu--list {
  @extend %drop-shadow;
  transition: opacity 0.25s ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: $ix-radius;
  position: relative;

  &:before {
    content: '';
    border: $context-menu--arrow-size solid transparent;
    position: absolute;
    top: 0;
    right: 50%;
    transform: translate(50%, -100%);
  }
}

.context-menu--list-container {
  z-index: 2;
  position: absolute;
  right: 50%;
  top: $context-menu--toggle-size;
  padding-top: $context-menu--arrow-size;
  transform: translateX(50%);
  transition: all;
  visibility: hidden;

  &.open {
    visibility: visible;

    .context-menu--list {
      opacity: 1;
    }
  }
}

.context-menu--item {
  text-align: left;
  color: $g20-white;
  outline: none;
  border: 0;
  background-color: transparent;
  font-weight: 700;
  font-size: 13px;
  line-height: 13px;
  white-space: nowrap;
  padding: 8px;
  transition: background-color 0.25s ease;

  &:first-child {
    border-top-left-radius: $ix-radius;
    border-top-right-radius: $ix-radius;
  }

  &:last-child {
    border-bottom-left-radius: $ix-radius;
    border-bottom-right-radius: $ix-radius;
  }

  &:hover {
    cursor: pointer;
  }

  &.context-menu--item__disabled,
  &.context-menu--item__disabled:hover {
    cursor: default;
    color: rgba($g20-white, 0.6);
    font-style: italic;
    background-color: transparent;
  }
}

.contex-menu--item-description {
  font-size: $ix-text-tiny;
  font-weight: 400;
  padding-top: $ix-marg-a;
  white-space: normal;
  width: 200px;
}

/* Alignment Modifiers */
.context-menu--align-left {
  justify-content: flex-start;

  & > .context-menu--container {
    margin-left: 2px;
  }

  & > .context-menu--container:first-child {
    margin-left: 0;

    .context-menu--list-container {
      right: 0;
      transform: translateX(calc(100% - #{$context-menu--toggle-size}));
    }
    
    .context-menu--list:before {
      right: calc(100% - #{$context-menu--toggle-size / 2});
    }
  }
}

.context-menu--align-right {
  justify-content: flex-end;

  & > .context-menu--container {
    margin-right: 2px;
  }
  
  & > .context-menu--container:last-child {
    margin-right: 0;

    .context-menu--list-container {
      right: 0;
      transform: translateX(0);
    }
    
    .context-menu--list:before {
      right: $context-menu--toggle-size / 2;
    }
  }
}

/* Theme Mixins */
@mixin contextToggleThemeModifier($accent, $hover) {
  &:hover {
    background-color: $accent;
  }

  &.active {
    background-color: $hover;
  }
}

@mixin contextListThemeModifier($accent, $hover) {
  background-color: $accent;

  &:before {
    border-bottom-color: $accent;
  }

  .context-menu--item:hover {
    background-color: $hover;
  }
}


/* Theme Modifiers */
.context-menu--toggle.context-menu--default {
  @include contextToggleThemeModifier($g7-graphite, $g8-storm);
}
.context-menu--list.context-menu--default {
  @include contextListThemeModifier($g7-graphite, $g8-storm);
}

.context-menu--toggle.context-menu--primary {
  @include contextToggleThemeModifier($c-pool, $c-laser);
}
.context-menu--list.context-menu--primary {
  @include contextListThemeModifier($c-pool, $c-laser);
}

.context-menu--toggle.context-menu--secondary {
  @include contextToggleThemeModifier($c-star, $c-comet);
}
.context-menu--list.context-menu--secondary {
  @include contextListThemeModifier($c-star, $c-comet);
}

.context-menu--toggle.context-menu--success {
  @include contextToggleThemeModifier($c-rainforest, $c-honeydew);
}
.context-menu--list.context-menu--success {
  @include contextListThemeModifier($c-rainforest, $c-honeydew);
}

.context-menu--toggle.context-menu--alert {
  @include contextToggleThemeModifier($c-pineapple, $c-thunder);
}
.context-menu--list.context-menu--alert {
  @include contextListThemeModifier($c-pineapple, $c-thunder);
}

.context-menu--toggle.context-menu--danger {
  @include contextToggleThemeModifier($c-curacao, $c-dreamsicle);
}
.context-menu--list.context-menu--danger {
  @include contextListThemeModifier($c-curacao, $c-dreamsicle);
}