/**
 * AppBuckets UI
 *
 * _Menu @ src/styles/collections/_menu.scss
 *
 * Defined at 12 ott 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 *
 *
 */


/******
    Base Menu Shared Style
******/
.menu {
  display: flex;
  flex-direction: row;
  font-size: 1em;


  // ----
  //  TextRight Menu must revert Row Elements
  // ----
  &.has-text-right {
    flex-direction: row-reverse;
  }


  // ----
  //  Menu Item Style
  // ----
  > .menu-item {
    font-weight: $menu-base-item-font-weight;
    position: relative;
    line-height: 1;
    vertical-align: middle;
    text-decoration: none;
    text-transform: $menu-item-text-transform;
    padding: $menu-item-padding-vertical $menu-item-padding-horizontal;
    flex: 0 0 auto;
    transition-timing-function: $transition-ease;
    transition-duration: $transition-duration;

    > .icon {
      margin-right: $menu-item-icon-spacer;
    }

    /// Dedicated style for header item
    &.header-item {
      font-size: $menu-header-item-font-size !important;
      font-weight: $menu-header-item-font-weight !important;
      text-transform: $menu-header-item-text-transform !important;
      color: $menu-header-item-color !important;

      &.submenu-trigger {
        cursor: pointer !important;
      }
    }

    /// All menu item, except header and disabled one has pointer cursor
    &:not(.disabled):not(.header-item) {
      cursor: pointer;
    }
  }


  // ----
  //  Change Flex direction on Vertical Menu
  // ----
  &.vertical {
    flex-direction: column;
    width: $menu-vertical-max-width;

    > .menu {
      padding-left: $menu-item-padding-horizontal;
      padding-bottom: $menu-item-padding-vertical;
    }
  }
}


/******
    Divider Style inside menu
******/
.menu > .horizontal.divider {
  margin-top: $menu-divider-spacer;
  margin-bottom: $menu-divider-spacer;

  &.text {
    color: $menu-base-item-color;
    margin-top: $menu-divider-with-content-spacer;
    margin-bottom: $menu-divider-with-content-spacer;
  }
}

.inverted.popup .menu > .horizontal.divider {
  border-top-color: $divider-inverted-color;

  &.text {
    &:after,
    &:before {
      border-top-color: $divider-inverted-color;
    }
  }
}


/******
    Base Menu Styling
******/
.base.menu,
.text.menu {
  > .menu-item {
    color: $menu-base-item-color;
    will-change: border-bottom, border-left, border-right, color, opacity;
    transition-property: border-bottom, border-left, border-right, color, opacity;
  }


  // ----
  //  Avoiding Active Menu has same color for all item
  // ----
  &.avoiding-active > .menu-item,
  > .menu-item.active {
    color: $menu-base-item-active-color;

    @each $label, $color in $ui-color-map {
      &.is-#{$label} {
        color: $color;
      }
    }
  }


  // ----
  //  Style dedicated to text menu only
  // ----
  &:not(.base):not(.avoiding-active) {
    > .menu-item:not(.disabled):not(.header-item) {
      @include hover {
        &:hover:not(.active) {
          color: $menu-text-item-hover-color;
        }
      }
    }
  }


  // ----
  //  Horizontal Menu has Border Bottom Color and Variation
  // ----
  &.horizontal:not(.text) {
    border-bottom: $menu-base-border-style $menu-base-border-width $menu-base-border-color;

    > .menu-item {
      margin-bottom: $menu-base-border-width * -1;
      border-bottom: $menu-base-border-style $menu-base-border-width transparent;

      &:not(.disabled):not(.header-item) {
        @include hover() {
          &:hover:not(.active) {
            border-bottom-color: $menu-base-item-hover-border-color;
          }
        }
      }

      &.active {
        border-bottom-color: $menu-base-item-active-border-color;

        @each $label, $color in $ui-color-map {
          &.is-#{$label} {
            border-bottom-color: $color;
          }
        }
      }
    }
  }


  // ----
  //  Vertical Menu has Border Right Color and Variation
  // ----
  &.vertical:not(.text) {
    border-right: $menu-base-border-style $menu-base-border-width $menu-base-border-color;

    > .menu-item {
      margin-right: $menu-base-border-width * -1;
      border-right: $menu-base-border-style $menu-base-border-width transparent;

      &:not(.disabled):not(.header-item) {
        @include hover() {
          &:hover:not(.active) {
            border-right-color: $menu-base-item-hover-border-color;
          }
        }
      }

      &.active {
        border-right-color: $menu-base-item-active-border-color;

        @each $label, $color in $ui-color-map {
          &.is-#{$label} {
            border-right-color: $color;
          }
        }
      }
    }
  }
}


/******
    Tab Menu Styling
******/
.tab.menu {
  // ----
  //  Base Item Style
  // ----
  > .menu-item:not(.header-item) {
    font-weight: $menu-tab-item-font-weight;
    border-radius: $menu-tab-item-border-radius;
    background-color: $menu-tab-item-base-background;
    color: $menu-tab-item-base-color;
    will-change: background-color, color;
    transition-property: background-color, color;

    &.active {
      background-color: $menu-tab-item-active-background;
      color: $menu-tab-item-active-color;
      box-shadow: $menu-tab-item-active-shadow;
      text-shadow: $menu-tab-item-active-text-shadow;

      @each $label, $color in $ui-color-map {
        &.is-#{$label} {
          background-color: $color;
          color: choose-contrast-color($color, $menu-tab-item-active-color, $menu-tab-item-active-contrast-color);
        }
      }
    }
  }


  // ----
  //  Horizontal Item Spacing
  // ----
  &.horizontal {
    margin-left: $menu-tab-item-spacer * -1;
    margin-right: $menu-tab-item-spacer * -1;

    // ----
    //  Set MenuItem Space
    // ----
    > .menu-item {
      margin-left: $menu-tab-item-spacer;
      margin-right: $menu-tab-item-spacer;

      &.header-item {
        margin-right: 0;
      }
    }
  }


  // ----
  //  Vertical Item Spacing
  // ----
  &.vertical {
    margin-top: $menu-tab-item-spacer * -1;
    margin-bottom: $menu-tab-item-spacer * -1;

    // ----
    //  Set MenuItem Space
    // ----
    > .menu-item {
      margin-top: $menu-tab-item-spacer;
      margin-bottom: $menu-tab-item-spacer;

      &.header-item {
        margin-bottom: 0;
      }
    }
  }
}


/******
    Bordered Menu has all Border
******/
.bordered.menu {
  border-radius: $menu-bordered-border-radius;
  border: $menu-bordered-border-style $menu-bordered-border-color $menu-bordered-border-width;

  &.vertical > .menu-item.header-item:not(:first-child) {
    border-top: $menu-bordered-border-style $menu-bordered-border-color $menu-bordered-border-width;
  }

  &.horizontal > .menu-item.header-item:not(:first-child) {
    border-left: $menu-bordered-border-style $menu-bordered-border-color $menu-bordered-border-width;
  }
}


/******
    Invert Ripple Color on Base and Text menu
******/
.text.menu,
.base.menu {
  > .menu-item > .ripple-container > .ripple {
    background-color: currentColor;
  }
}