/**
 * Menu
 * Dropdown menus throughout Colonel Kurtz
 */

$col-menu-background     : #fff !default;
$col-menu-handle-color   : rgba(#000, 0.6) !default;
$col-menu-handle-padding : unit(1.5) !default;
$col-menu-item-fontsize  : 14px !default;
$col-menu-item-padding   : unit(1.5) unit(2) !default;
$col-menu-padding        : unit(1) 0 !default;
$col-menu-radius         : $col-radius-small !default;
$col-menu-right          : unit(1) !default;
$col-menu-top            : unit(1) !default;
$col-menu-width          : unit(18) !default;
$col-menu-z-index        : 1 !default;

.col-menu-wrapper {
  position: absolute;
  right: 0;
  top: 0;
}

.col-menu-backdrop {
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2;
}

.col-menu-handle {
  @extend %col-focusable;
  border-radius: 50%;
  color: $col-primary;
  height: unit(6);
  padding: $col-menu-handle-padding;
  position: relative;
  z-index: $col-menu-z-index;

  svg {
    fill: $col-menu-handle-color;
  }
}

.col-menu {
  background: $col-menu-background;
  border-radius: $col-menu-radius;
  box-shadow: 0 2px 3px rgba(#000, 0.4), 0 -1px 1px rgba(#000, 0.15);
  min-width: $col-menu-width;
  overflow: hidden;
  padding: $col-menu-padding;
  position: absolute;
  right: $col-menu-right;
  transform-origin: 100% 0;
  top: $col-menu-top;
  z-index: 2;

  &:focus {
    outline: none;
  }
}

.col-menu-label:after {
    border: 4px solid;
    border-color: rgba(#000, 0.2) transparent transparent;
    content: "";
    display: inline-block;
    margin-left: 8px;
    margin-right: -4px;
    position: relative;
    top: 2px;
}

.col-menu-item {
  border-radius: 0;
  color: rgba(#000, 0.7);
  display: block;
  font-size: $col-menu-item-fontsize;
  line-height: 16px;
  padding: $col-menu-item-padding;
  position: relative;
  min-width: 100%;
  transition: 0.3s all;
  text-align: left;

  &:hover,
  &:focus {
    background: #e0e0e0;
    transition: 0.1s all;
    outline: none;
  }

  &[disabled] {
    color: rgba(#000, 0.2);
    pointer-events: none;
  }
}

.col-menu-enter,
.col-menu-leave.col-menu-leave-active {
  opacity: 0;
  transform: scale(0.2);
  transition: 0.3s all;
  z-index: 100;

  .col-menu-item {
    opacity: 0;
    transition: 0.3s all;
  }
}

.col-menu-enter.col-menu-enter-active,
.col-menu-leave {
  opacity: 1;
  transform: none;
  transition: 0.2s all;

  .col-menu-item {
    opacity: 1;
    transition: 0.3s all 0.2s;
  }
}