@import '../../themes/default/collections/menu.variables';

@if $use-menu {
  /*--------------
  //@-  Menu
  ---------------*/

  .ui.menu {
    display: flex;
    margin: $menu-margin;
    font-family: $menu-font-family;
    background: $menu-background;
    font-weight: $menu-font-weight;
    border: $menu-border;
    box-shadow: $menu-box-shadow;
    border-radius: $menu-border-radius;
    min-height: $menu-min-height;
  }

  .ui.menu:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .ui.menu:first-child {
    margin-top: 0;
  }
  .ui.menu:last-child {
    margin-bottom: 0;
  }


  /*--------------
      Sub-Menu
  ---------------*/

  .ui.menu .menu {
    margin: 0;
  }

  .ui.menu:not(.vertical) > .menu {
    display: flex;
  }

  /*--------------
        Item
  ---------------*/

  .ui.menu:not(.vertical) .item {
    display: flex;
    align-items: center;
  }

  .ui.menu .item {
    position: relative;
    vertical-align: middle;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    flex: 0 0 auto;
    user-select: none;

    background: $menu-item-background;
    padding: $menu-item-vertical-padding $menu-item-horizontal-padding;
    text-transform: $menu-item-text-transform;
    color: $menu-item-text-color;
    font-weight: $menu-item-font-weight;
    transition: $menu-item-transition;
  }

  .ui.menu > .item:first-child {
    border-radius: $menu-border-radius 0 0 $menu-border-radius;
  }

  /* Border */
  .ui.menu .item:before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    height: 100%;

    width: $menu-divider-size;
    background: $menu-divider-background;
  }

  /*--------------
    Text Content
  ---------------*/

  .ui.menu .text.item > *,
  .ui.menu .item > a:not(.ui),
  .ui.menu .item > p:only-child {
    user-select: text;
    line-height: $menu-text-line-height;
  }
  .ui.menu .item > p:first-child {
    margin-top: 0;
  }
  .ui.menu .item > p:last-child {
    margin-bottom: 0;
  }

  /*--------------
        Icons
  ---------------*/

  .ui.menu .item > i.icon {
    opacity: $menu-icon-opacity;
    float: $menu-icon-float;
    margin: $menu-icon-margin;
  }

  /*--------------
      Button
  ---------------*/

  .ui.menu:not(.vertical) .item > .button {
    position: relative;
    top: $menu-button-offset;
    margin: $menu-button-margin;
    padding-bottom: $menu-button-vertical-padding;
    padding-top: $menu-button-vertical-padding;
    font-size: $menu-button-size;
  }

  /*----------------
  Grid / Container
  -----------------*/

  .ui.menu >  .grid,
  .ui.menu > .container {
    display: flex;
    align-items: inherit;
    flex-direction: inherit;
  }

  /*--------------
      Inputs
  ---------------*/

  .ui.menu .item > .input {
    width: 100%;
  }
  .ui.menu:not(.vertical) .item > .input {
    position: relative;
    top: $menu-input-offset;
    margin: $menu-input-vertical-margin 0;
  }
  .ui.menu .item > .input input {
    font-size: $menu-input-size;
    padding-top: $menu-input-vertical-padding;
    padding-bottom: $menu-input-vertical-padding;
  }


  /*--------------
      Header
  ---------------*/

  .ui.menu .header.item,
  .ui.vertical.menu .header.item {
    margin: 0;
    background: $menu-header-background;
    text-transform: $menu-header-text-transform;
    font-weight: $menu-header-weight;
  }

  .ui.vertical.menu .item > .header:not(.ui) {
    margin: $menu-vertical-header-margin;
    font-size: $menu-vertical-header-font-size;
    font-weight: $menu-vertical-header-font-weight;
  }

  /*--------------
      Dropdowns
  ---------------*/


  /* Dropdown Icon */
  .ui.menu .item > i.dropdown.icon {
    padding: 0;
    float: $menu-dropdown-icon-float;
    margin: 0 0 0 $menu-dropdown-icon-distance;
  }

  /* Menu */
  .ui.menu .dropdown.item .menu {
    min-width: calc(100% - 1px);
    border-radius: 0 0 $menu-dropdown-border-radius $menu-dropdown-border-radius;
    background: $menu-dropdown-background;
    margin: $menu-dropdown-distance 0 0;
    box-shadow: $menu-dropdown-box-shadow;
    flex-direction: column !important;
  }


  /* Menu Items */
  .ui.menu .ui.dropdown .menu > .item {
    margin: 0;
    text-align: left;
    font-size: $menu-dropdown-item-font-size !important;
    padding: $menu-dropdown-item-padding !important;
    background: $menu-dropdown-item-background !important;
    color: $menu-dropdown-item-color !important;
    text-transform: $menu-dropdown-item-text-transform !important;
    font-weight: $menu-dropdown-item-font-weight !important;
    box-shadow: $menu-dropdown-item-box-shadow !important;
    transition: $menu-dropdown-item-transition !important;
  }
  .ui.menu .ui.dropdown .menu > .item:hover {
    background: $menu-dropdown-hovered-item-background !important;
    color: $menu-dropdown-hovered-item-color !important;
  }
  .ui.menu .ui.dropdown .menu > .selected.item {
    background: $menu-dropdown-selected-item-background !important;
    color: $menu-dropdown-selected-item-color !important;
  }
  .ui.menu .ui.dropdown .menu > .active.item {
    background: $menu-dropdown-active-item-background !important;
    font-weight: $menu-dropdown-active-item-font-weight !important;
    color: $menu-dropdown-active-item-color !important;
  }

  .ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
    display: block;
  }
  .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {
    display: inline-block;
    font-size: $menu-dropdown-item-icon-font-size !important;
    float: $menu-dropdown-item-icon-float;
    margin: $menu-dropdown-item-icon-margin !important;
  }


  /* Secondary */
  .ui.secondary.menu .dropdown.item > .menu,
  .ui.text.menu .dropdown.item > .menu {
    border-radius: $menu-dropdown-border-radius;
    margin-top: $menu-secondary-dropdown-distance;
  }

  /* Pointing */
  .ui.menu .pointing.dropdown.item .menu {
    margin-top: $menu-pointing-dropdown-distance;
  }

  @if($use-menu-variation-inverted) {
    /* Inverted */
    .ui.inverted.menu .search.dropdown.item > .search,
    .ui.inverted.menu .search.dropdown.item > .text {
      color: $menu-inverted-selection-dropdown-color;
    }
  }

  @if($use-menu-type-vertical) {
    /* Vertical */
    .ui.vertical.menu .dropdown.item > .icon {
      float: right;
      content: "\f0da";
      margin-left: 1em;
    }
    .ui.vertical.menu .dropdown.item .menu {
      left: 100%;
      /* IE needs 0, all others support max-content to show dropdown icon inline, so keep both settings! */
      min-width: 0;
      min-width: max-content;
      margin: 0 0 0 $menu-dropdown-distance;
      box-shadow: $menu-dropdown-vertical-box-shadow;
      border-radius: 0 $menu-dropdown-border-radius $menu-dropdown-border-radius $menu-dropdown-border-radius;
    }
    .ui.vertical.menu .dropdown.item.upward .menu {
      bottom: 0;
    }
    .ui.vertical.menu .dropdown.item:not(.upward) .menu {
      top: 0;
    }
    .ui.vertical.menu .active.dropdown.item {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .ui.vertical.menu .dropdown.active.item {
      box-shadow: none;
    }
  }

  /* Evenly Divided */
  .ui.item.menu .dropdown .menu .item {
    width: 100%;
  }

  /*--------------
      Labels
  ---------------*/

  .ui.menu .item > .label:not(.floating) {
    margin-left: $menu-label-text-margin;
    padding: $menu-label-vertical-padding $menu-label-horizontal-padding;
  }
  .ui.vertical.menu .item > .label {
    margin-top: $menu-label-offset;
    margin-bottom: $menu-label-offset;
    padding: $menu-label-vertical-padding $menu-label-horizontal-padding;
  }
  .ui.menu .item > .floating.label {
    padding: $menu-label-vertical-padding $menu-label-horizontal-padding;
  }
  .ui.menu .item > .label {
    background: $menu-label-background;
    color: $menu-label-text-color;
  }
  .ui.menu .item > .image.label img {
    margin: $menu-image-label-image-margin;
    height: $menu-image-label-height;
  }
  /*--------------
      Images
  ---------------*/

  .ui.menu .item > img:not(.ui) {
    display: inline-block;
    vertical-align: middle;
    margin: $menu-image-margin;
    width: $menu-image-width;
  }
  .ui.vertical.menu .item > img:not(.ui):only-child {
    display: block;
    max-width: 100%;
    width: $menu-vertical-image-width;
  }

  /*******************************
            Coupling
  *******************************/

  /*--------------
      List
  ---------------*/

  /* Menu divider shouldnt apply */
  .ui.menu .list .item:before {
    background: none !important;
  }

  @if($use-menu-type-vertical) {
    /*--------------
        Sidebar
    ---------------*/

    /* Show vertical dividers below last */

    .ui.vertical.sidebar.menu > .item:first-child:before {
      display: block !important;
    }
    .ui.vertical.sidebar.menu > .item::before {
      top: auto;
      bottom: 0;
    }
  }

  /*--------------
      Container
  ---------------*/

  @media only screen and (max-width: $largest-mobile-screen) {
    .ui.menu > .ui.container {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }
  @media only screen and (min-width: $tablet-breakpoint) {
    .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
      border-left: $menu-divider-size solid $menu-divider-background;
    }
    .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child,
    .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child {
      border-right: $menu-divider-size solid $menu-divider-background;
    }
  }


  /*******************************
              States
  *******************************/

  /*--------------
        Hover
  ---------------*/


  .ui.link.menu .item:hover,
  .ui.menu .dropdown.item:hover,
  .ui.menu .link.item:hover,
  .ui.menu a.item:hover {
    cursor: pointer;
    background: $menu-hover-item-background;
    color: $menu-hover-item-text-color;
  }


  /*--------------
      Pressed
  ---------------*/

  .ui.link.menu .item:active,
  .ui.menu .link.item:active,
  .ui.menu a.item:active {
    background: $menu-pressed-item-background;
    color: $menu-pressed-item-text-color;
  }


  /*--------------
      Active
  ---------------*/

  .ui.menu .active.item  {
    background: $menu-active-item-background;
    color: $menu-active-item-text-color;
    font-weight: $menu-active-item-font-weight;
    box-shadow: $menu-active-item-box-shadow;
  }
  .ui.menu .active.item > i.icon {
    opacity: $menu-active-icon-opacity;
  }

  /*--------------
    Active Hover
  ---------------*/

  .ui.menu .active.item:hover,
  .ui.vertical.menu .active.item:hover {
    background-color: $menu-active-hover-item-background;
    color: $menu-active-hover-item-color;
  }


  /*--------------
      Disabled
  ---------------*/

  .ui.ui.menu .item.disabled {
    cursor: default;
    background-color: transparent;
    color: $disabled-text-color;
    pointer-events: none;
  }


  /*******************************
              Types
  *******************************/

  /*------------------
  Floated Menu / Item
  -------------------*/

  /* Left Floated */
  .ui.menu:not(.vertical) .left.item,
  .ui.menu:not(.vertical) .left.menu {
    display: flex;
    margin-right: auto !important;
  }
  /* Right Floated */
  .ui.menu:not(.vertical) .right.item,
  .ui.menu:not(.vertical) .right.menu {
    display: flex;
    margin-left: auto !important;
  }

  .ui.menu:not(.vertical) :not(.dropdown) > .left.menu,
  .ui.menu:not(.vertical) :not(.dropdown) > .right.menu {
    display: inherit;
  }

  /* Center */
  .ui.menu:not(.vertical) .center.item,
  .ui.menu:not(.vertical) .center.menu {
    display: flex;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Swapped Borders */
  .ui.menu .right.item::before,
  .ui.menu .right.menu > .item::before {
    right: auto;
    left: 0;
  }

  /* Remove Outer Borders */
  .ui.menu .center.item:last-child::before,
  .ui.menu .center.menu > .item:last-child::before {
    display: none;
  }

  @if($use-menu-type-vertical) {
    /*--------------
        Vertical
    ---------------*/

    .ui.vertical.menu {
      display: block;
      flex-direction: column;
      background: $menu-vertical-background;
      box-shadow: $menu-vertical-box-shadow;
    }

    /*--- Item ---*/
    .ui.vertical.menu .item {
      display: block;
      background: $menu-vertical-item-background;
      border-top: none;
      border-right: none;
    }
    .ui.vertical.menu > .item:first-child {
      border-radius: $menu-border-radius $menu-border-radius 0 0;
    }
    .ui.vertical.menu > .item:last-child {
      border-radius: 0 0 $menu-border-radius $menu-border-radius;
    }

    /*--- Label ---*/
    .ui.vertical.menu .item > .label {
      float: right;
      text-align: center;
    }

    /*--- Icon ---*/
    .ui.vertical.menu .item > i.icon,
    .ui.vertical.menu .item > i.icons {
      width: $icon-width;
      float: $menu-vertical-icon-float;
      margin: $menu-vertical-icon-margin;
    }
    .ui.vertical.menu .item > .label + i.icon {
      float: $menu-label-and-icon-float;
      margin: $menu-label-and-icon-margin;
    }


    /*--- Border ---*/
    .ui.vertical.menu .item:before {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 100%;
      height: $menu-divider-size;
      background: $menu-vertical-divider-background;
    }

    .ui.vertical.menu .item:first-child:before {
      display: none !important;
    }


    /*--- Sub Menu ---*/
    .ui.vertical.menu .item > .menu {
      margin: $menu-sub-margin;
    }
    .ui.vertical.menu .menu .item {
      background: none;
      padding: $menu-sub-vertical-padding $menu-sub-horizontal-padding;
      font-size: $menu-sub-font-size;
      color: $menu-sub-text-color;
    }
    .ui.vertical.menu .item .menu a.item:hover,
    .ui.vertical.menu .item .menu .link.item:hover {
      color: $dark-text-color;
    }
    .ui.vertical.menu .menu .item:before {
      display: none;
    }

    /* Vertical Active */
    .ui.vertical.menu .active.item {
      background: $menu-active-item-background;
      border-radius: 0;
      box-shadow: $menu-vertical-active-box-shadow;
    }
    .ui.vertical.menu > .active.item:first-child {
      border-radius: $menu-border-radius $menu-border-radius 0 0;
    }
    .ui.vertical.menu > .active.item:last-child {
      border-radius: 0 0 $menu-border-radius $menu-border-radius;
    }
    .ui.vertical.menu > .active.item:only-child {
      border-radius: $menu-border-radius;
    }
    .ui.vertical.menu .active.item .menu .active.item {
      border-left: none;
    }
    .ui.vertical.menu .item .menu .active.item {
      background-color: $menu-sub-active-background;
      font-weight: $menu-sub-active-font-weight;
      color: $menu-sub-active-text-color;
    }
  }


  @if($use-menu-type-tabular) {
    /*--------------
        Tabular
    ---------------*/

    .ui.tabular.menu {
      border-radius: 0;
      box-shadow: none !important;
      border: none;
      background: $menu-tabular-background;
      border-bottom: $menu-tabular-border-width solid $menu-tabular-border-color;
    }
    .ui.tabular.fluid.menu {
      width: $menu-tabular-fluid-width !important;
    }
    .ui.tabular.menu .item {
      background: transparent;
      border-bottom: none;

      border-left: $menu-tabular-border-width solid transparent;
      border-right: $menu-tabular-border-width solid transparent;
      border-top: $menu-tabular-opposite-border-width solid transparent;
      padding: $menu-tabular-vertical-padding $menu-tabular-horizontal-padding;
      color: $menu-tabular-text-color;
    }
    .ui.tabular.menu .item:before {
      display: none;
    }

    /* Hover */
    .ui.tabular.menu .item:hover {
      background-color: transparent;
      color: $menu-tabular-hovered-text-color;
    }

    /* Active */
    .ui.tabular.menu .active.item {
      background: $menu-tabular-active-background;
      color: $menu-tabular-active-color;
      border-top-width: $menu-tabular-border-width;
      border-color: $menu-tabular-border-color;
      font-weight: $menu-tabular-active-weight;
      margin-bottom: -$menu-tabular-border-width;
      box-shadow: $menu-tabular-active-box-shadow;
      border-radius: $menu-tabular-border-radius $menu-tabular-border-radius 0 0 !important;
    }

    @if($use-menu-variation-attached) {
      /* Coupling with segment for attachment */
      .ui.tabular.menu + .attached:not(.top).segment,
      .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
        border-top: none;
        margin-left: 0;
        margin-top: 0;
        margin-right: 0;
        width: 100%;
      }
      .top.attached.segment + .ui.bottom.tabular.menu {
        position: relative;
        width: $menu-tabular-fluid-width;
        left: -$menu-tabular-fluid-offset;
      }
    }

    .ui.bottom.tabular.menu {
      background: $menu-tabular-background;
      border-radius: 0;
      box-shadow: none !important;
      border-bottom: none;
      border-top: $menu-tabular-border-width solid $menu-tabular-border-color;
    }
    .ui.bottom.tabular.menu .item {
      background: none;
      border-left: $menu-tabular-border-width solid transparent;
      border-right: $menu-tabular-border-width solid transparent;
      border-bottom: $menu-tabular-border-width solid transparent;
      border-top: none;
    }
    .ui.bottom.tabular.menu .active.item {
      background: $menu-tabular-active-background;
      color: $menu-tabular-active-color;
      border-color: $menu-tabular-border-color;
      margin: (-$menu-tabular-border-width) 0 0 0;
      border-radius: 0 0 $menu-tabular-border-radius $menu-tabular-border-radius !important;
    }

    @if($use-menu-type-vertical) {
      /* Vertical Tabular (Left) */
      .ui.vertical.tabular.menu {
        background: $menu-tabular-vertical-background;
        border-radius: 0;
        box-shadow: none !important;
        border-bottom: none;
        border-right: $menu-tabular-border-width solid $menu-tabular-border-color;
      }
      .ui.vertical.tabular.menu .item {
        background: none;
        border-left: $menu-tabular-border-width solid transparent;
        border-bottom: $menu-tabular-border-width solid transparent;
        border-top: $menu-tabular-border-width solid transparent;
        border-right: none;
      }
      .ui.vertical.tabular.menu .active.item {
        background: $menu-tabular-active-background;
        color: $menu-tabular-active-color;
        border-color: $menu-tabular-border-color;
        margin: 0 (-$menu-tabular-border-width) 0 0;
        border-radius: $menu-tabular-border-radius 0 0 $menu-tabular-border-radius !important;
      }

      /* Vertical Right Tabular */
      .ui.vertical.right.tabular.menu {
        background: $menu-tabular-vertical-background;
        border-radius: 0;
        box-shadow: none !important;
        border-bottom: none;
        border-right: none;
        border-left: $menu-tabular-border-width solid $menu-tabular-border-color;
      }
      .ui.vertical.right.tabular.menu .item {
        background: none;
        border-right: $menu-tabular-border-width solid transparent;
        border-bottom: $menu-tabular-border-width solid transparent;
        border-top: $menu-tabular-border-width solid transparent;
        border-left: none;
      }
      .ui.vertical.right.tabular.menu .active.item {
        background: $menu-tabular-active-background;
        color: $menu-tabular-active-color;
        border-color: $menu-tabular-border-color;
        margin: 0 0 0 (-$menu-tabular-border-width);
        border-radius: 0 $menu-tabular-border-radius $menu-tabular-border-radius 0 !important;
      }
    }

    /* Dropdown */
    .ui.tabular.menu .active.dropdown.item {
      margin-bottom: 0;
      border-left: $menu-tabular-border-width solid transparent;
      border-right: $menu-tabular-border-width solid transparent;
      border-top: $menu-tabular-opposite-border-width solid transparent;
      border-bottom: none;
    }
  }


  @if($use-menu-type-pagination) {
    /*--------------
      Pagination
    ---------------*/

    .ui.pagination.menu {
      margin: 0;
      display: inline-flex;
      vertical-align: middle;
    }
    .ui.pagination.menu .item:last-child {
      border-radius: 0 $menu-border-radius $menu-border-radius 0;
    }
    .ui.compact.menu .item:last-child {
      border-radius: 0 $menu-border-radius $menu-border-radius 0;
    }
    .ui.pagination.menu .item:last-child:before {
      display: none;
    }

    .ui.pagination.menu .item {
      min-width: $menu-pagination-min-width;
      text-align: center;
    }
    .ui.pagination.menu .icon.item i.icon {
      vertical-align: top;
    }

    /* Active */
    .ui.pagination.menu .active.item {
      border-top: none;
      padding-top: $menu-item-vertical-padding;
      background-color: $menu-pagination-active-background;
      color: $menu-pagination-active-text-color;
      box-shadow: none;
    }
  }


  @if($use-menu-type-secondary) {
    /*--------------
      Secondary
    ---------------*/

    .ui.secondary.menu {
      background: $menu-secondary-background;
      margin-left: -$menu-secondary-item-spacing;
      margin-right: -$menu-secondary-item-spacing;
      border-radius: 0;
      border: none;
      box-shadow: none;
    }

    /* Item */
    .ui.secondary.menu .item {
      align-self: center;
      box-shadow: none;
      border: none;
      padding: $menu-secondary-item-padding;
      margin: $menu-secondary-item-margin;
      background: $menu-secondary-item-background;
      transition: $menu-secondary-item-transition;
      border-radius: $menu-secondary-item-border-radius;
    }

    /* No Divider */
    .ui.secondary.menu .item:before {
      display: none !important;
    }

    /* Header */
    .ui.secondary.menu .header.item {
      border-radius: 0;
      border-right: $menu-secondary-header-border;
      background: $menu-secondary-header-background;
    }

    /* Image */
    .ui.secondary.menu .item > img:not(.ui) {
      margin: 0;
    }

    /* Hover */
    .ui.secondary.menu .dropdown.item:hover,
    .ui.secondary.menu .link.item:hover,
    .ui.secondary.menu a.item:hover {
      background: $menu-secondary-hover-item-background;
      color: $menu-secondary-hover-item-color;
    }

    /* Active */
    .ui.secondary.menu .active.item {
      box-shadow: none;
      background: $menu-secondary-active-item-background;
      color: $menu-secondary-active-item-color;
      border-radius: $menu-secondary-item-border-radius;
    }

    /* Active Hover */
    .ui.secondary.menu .active.item:hover {
      box-shadow: none;
      background: $menu-secondary-active-hover-item-background;
      color: $menu-secondary-active-hover-item-color;
    }

    @if($use-menu-variation-inverted) {
      /* Inverted */
      .ui.secondary.inverted.menu .link.item:not(.disabled),
      .ui.secondary.inverted.menu a.item:not(.disabled) {
        color: $menu-secondary-inverted-color;
      }
      .ui.secondary.inverted.menu .dropdown.item:hover,
      .ui.secondary.inverted.menu .link.item:hover,
      .ui.secondary.inverted.menu a.item:hover {
        background: $menu-secondary-inverted-hover-background;
        color: $menu-secondary-inverted-hover-color;
      }
      .ui.secondary.inverted.menu .active.item {
        background: $menu-secondary-inverted-active-background;
        color: $menu-secondary-inverted-active-color;
      }
    }

    /* Fix item margins */
    .ui.secondary.item.menu {
      margin-left: 0;
      margin-right: 0;
    }
    .ui.secondary.item.menu .item:last-child {
      margin-right: 0;
    }
    .ui.secondary.attached.menu {
      box-shadow: none;
    }

    
    @if($use-menu-type-vertical) {
      /*---------------------
      Secondary Vertical
      -----------------------*/
      
      /* Sub Menu */
      .ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
        margin: $menu-secondary-sub-menu-margin;
      }
      .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
        margin: $menu-secondary-sub-menu-item-margin;
        padding: $menu-secondary-sub-menu-item-padding;
      }

      .ui.secondary.vertical.menu > .item {
        border: none;
        margin: $menu-secondary-vertical-item-margin;
        border-radius: $menu-secondary-vertical-item-border-radius !important;
      }
      .ui.secondary.vertical.menu > .header.item {
        border-radius: 0;
      }

      /* Sub Menu */
      .ui.vertical.secondary.menu .item > .menu .item {
        background-color: transparent;
      }

      /* Inverted */
      .ui.secondary.inverted.menu {
        background-color: transparent;
      }
    }

    @if($use-menu-type-pointing) {
      /*---------------------
        Secondary Pointing
      -----------------------*/

      .ui.secondary.pointing.menu {
        margin-left: 0;
        margin-right: 0;
        border-bottom: $menu-secondary-pointing-border-width solid $menu-secondary-pointing-border-color;
      }

      .ui.secondary.pointing.menu .item {
        border-bottom-color: transparent;
        border-bottom-style: solid;
        border-radius: 0;
        align-self: flex-end;

        margin: 0 0 (-$menu-secondary-pointing-border-width);
        padding: $menu-secondary-pointing-item-vertical-padding $menu-secondary-pointing-item-horizontal-padding;
        border-bottom-width: $menu-secondary-pointing-border-width;
        transition: $menu-secondary-item-transition;
      }
      .ui.secondary.pointing.menu .ui.dropdown .menu .item {
        border-bottom-width: 0;
      }

      .ui.secondary.pointing.menu .item > .label:not(.floating) {
        margin-top: -$menu-label-vertical-padding;
        margin-bottom: -$menu-label-vertical-padding;
      }
      .ui.secondary.pointing.menu .item > .circular.label {
        margin-top: -$menu-circular-label-vertical-padding;
        margin-bottom: -$menu-circular-label-vertical-padding;
      }

      /* Item Types */
      .ui.secondary.pointing.menu .header.item {
        color: $menu-secondary-pointing-header-color !important;
      }
      .ui.secondary.pointing.menu .text.item {
        box-shadow: none !important;
      }
      .ui.secondary.pointing.menu .item:after {
        display: none;
      }

      /* Hover */
      .ui.secondary.pointing.menu .dropdown.item:hover,
      .ui.secondary.pointing.menu .link.item:hover,
      .ui.secondary.pointing.menu a.item:hover {
        background-color: transparent;
        color: $menu-secondary-pointing-hover-text-color;
      }

      /* Pressed */
      .ui.secondary.pointing.menu .dropdown.item:active,
      .ui.secondary.pointing.menu .link.item:active,
      .ui.secondary.pointing.menu a.item:active {
        background-color: transparent;
        border-color: $menu-secondary-pointing-border-color;
      }

      /* Active */
      .ui.secondary.pointing.menu .active.item {
        background-color: transparent;
        box-shadow: none;
        border-color: $menu-secondary-pointing-active-border-color;
        font-weight: $menu-secondary-pointing-active-font-weight;
        color: $menu-secondary-pointing-active-text-color;
      }

      /* Active Hover */
      .ui.secondary.pointing.menu .active.item:hover {
        border-color: $menu-secondary-pointing-active-hover-border-color;
        color: $menu-secondary-pointing-active-hover-text-color;
      }

      /* Active Dropdown */
      .ui.secondary.pointing.menu .active.dropdown.item {
        border-color: $menu-secondary-pointing-active-dropdown-border-color;
      }

      @if($use-menu-type-vertical) {
        /* Vertical Pointing */
        .ui.secondary.vertical.pointing.menu {
          border-bottom-width: 0;
          border-right-width: $menu-secondary-pointing-border-width;
          border-right-style: solid;
          border-right-color: $menu-secondary-pointing-border-color;
        }
        .ui.secondary.vertical.pointing.menu .item {
          border-bottom: none;
          border-right-style: solid;
          border-right-color: transparent;
          border-radius: 0 !important;
          margin: $menu-secondary-vertical-pointing-item-margin;
          border-right-width: $menu-secondary-pointing-border-width;
        }
        /* Vertical Active */
        .ui.secondary.vertical.pointing.menu .active.item {
          border-color: $menu-secondary-pointing-active-border-color;
        }
      }


      @if($use-menu-variation-inverted) {
        /* Inverted */
        .ui.secondary.inverted.pointing.menu {
          border-color: $menu-secondary-pointing-inverted-border-color;
        }

        .ui.secondary.inverted.pointing.menu .item:not(.disabled) {
          color: $menu-secondary-pointing-inverted-item-text-color;
        }
        .ui.secondary.inverted.pointing.menu .header.item {
          color: $menu-secondary-pointing-inverted-item-header-color !important;
        }

        /* Hover */
        .ui.secondary.inverted.pointing.menu .link.item:hover,
        .ui.secondary.inverted.pointing.menu a.item:hover {
          color: $menu-secondary-pointing-inverted-item-hover-text-color;
        }

        /* Active */
        .ui.ui.secondary.inverted.pointing.menu .active.item {
          border-color: $menu-secondary-pointing-inverted-active-border-color;
          color: $menu-secondary-pointing-inverted-active-color;
          background-color: transparent;
        }
      }
    }
  }


  @if($use-menu-type-text) {
    /*--------------
        Text Menu
    ---------------*/

    .ui.text.menu {
      background: none transparent;
      border-radius: 0;
      box-shadow: none;
      border: none;

      margin: $menu-text-margin;
    }
    .ui.text.menu .item {
      border-radius: 0;
      box-shadow: none;
      align-self: center;
      margin: $menu-text-item-margin;
      padding: $menu-text-item-padding;
      font-weight: $menu-text-item-font-weight;
      color: $menu-text-item-color;
      transition: $menu-text-item-transition;
    }

    /* Border */
    .ui.text.menu .item:before,
    .ui.text.menu .menu .item:before {
      display: none !important;
    }

    /* Header */
    .ui.text.menu .header.item {
      background-color: transparent;
      opacity: 1;
      color: $menu-text-header-color;
      font-size: $menu-text-header-size;
      text-transform: $menu-text-header-text-transform;
      font-weight: $menu-text-header-font-weight;
    }

    /* Image */
    .ui.text.menu .item > img:not(.ui) {
      margin: 0;
    }

    /*--- fluid text ---*/
    .ui.text.item.menu .item {
      margin: 0;
    }
    
    @if($use-menu-type-vertical) {
      /*--- vertical text ---*/
      .ui.vertical.text.menu {
        margin: $menu-text-vertical-margin;
      }
      .ui.vertical.text.menu:first-child {
        margin-top: 0;
      }
      .ui.vertical.text.menu:last-child {
        margin-bottom: 0;
      }
      .ui.vertical.text.menu .item {
        margin: $menu-text-vertical-item-margin;
        padding-left: 0;
        padding-right: 0;
      }
      .ui.vertical.text.menu .item > i.icon {
        float: $menu-text-vertical-icon-float;
        margin: $menu-icon-margin;
      }
      .ui.vertical.text.menu .header.item {
        margin: $menu-text-vertical-header-margin;
      }

      /* Vertical Sub Menu */
      .ui.vertical.text.menu .item:not(.dropdown) > .menu {
        margin: $menu-text-sub-menu-margin;
      }
      .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
        margin: $menu-text-sub-menu-item-margin;
        padding: $menu-text-sub-menu-item-padding;
      }
    }

    /*--- hover ---*/
    .ui.text.menu .item:hover {
      opacity: 1;
      background-color: transparent;
    }

    /*--- active ---*/
    .ui.text.menu .active.item {
      background-color: transparent;
      border: none;
      box-shadow: none;
      font-weight: $menu-text-active-item-font-weight;
      color: $menu-text-active-item-color;
    }

    /*--- active hover ---*/
    .ui.text.menu .active.item:hover {
      background-color: transparent;
    }

    /* Disable Bariations */
    .ui.text.pointing.menu .active.item:after {
      box-shadow: none;
    }
    @if($use-menu-variation-attached) {
      .ui.text.attached.menu {
        box-shadow: none;
      }
    }

    @if($use-menu-variation-inverted) {
      /* Inverted */
      .ui.inverted.text.menu,
      .ui.inverted.text.menu .item,
      .ui.inverted.text.menu .item:hover,
      .ui.inverted.text.menu .active.item {
        background-color: transparent;
      }
      .ui.inverted.icon.menu .item {
        color: $menu-icon-inverted-item-color;
      }
    }

    /* Fluid */
    .ui.fluid.text.menu {
      margin-left: 0;
      margin-right: 0;
    }
  }

  /*--------------
      Icon Only
  ---------------*/

  /* Vertical Menu */
  .ui.vertical.icon.menu {
    display: inline-block;
    width: auto;
  }

  /* Item */
  .ui.icon.menu .item {
    height: auto;
    text-align: $menu-icon-text-align;
    color: $menu-icon-item-color;
  }

  /* Icon */
  .ui.icon.menu .item > .icon:not(.dropdown) {
    margin: 0;
    opacity: 1;
  }

  /* Icon Gylph */
  .ui.icon.menu .icon:before {
    opacity: 1;
  }

  /* (x) Item Icon */
  .ui.menu .icon.item > .icon {
    width: auto;
    margin: 0 auto;
  }

  /* Vertical Icon */
  .ui.vertical.icon.menu .item > .icon:not(.dropdown) {
    display: block;
    opacity: 1;
    margin: 0 auto;
    float: none;
  }

  /*--------------
    Labeled Icon
  ---------------*/

  /* Menu */
  .ui.labeled.icon.menu {
    text-align: center;
  }

  /* Item */
  .ui.labeled.icon.menu .item {
    min-width: $menu-labeled-icon-min-width;
    flex-direction: column;
  }

  /* Icon */
  .ui.labeled.icon.menu > .item > .icon:not(.dropdown) {
    height: 1em;
    display: block;
    font-size: $menu-labeled-icon-size !important;
    margin: 0 auto $menu-labeled-icon-text-margin !important;
  }

  /* Fluid */
  .ui.fluid.labeled.icon.menu > .item {
    min-width: 0;
  }


  /*******************************
            Variations
  *******************************/

  /*--------------
      Stackable
  ---------------*/

  @media only screen and (max-width: $largest-mobile-screen) {
    .ui.stackable.menu {
      flex-direction: column;
    }
    .ui.stackable.menu .item {
      width: 100% !important;
    }
    .ui.stackable.menu .item:before {
      position: absolute;
      content: '';
      top: auto;
      bottom: 0;
      left: 0;
      width: 100%;
      height: $menu-divider-size;
      background: $menu-vertical-divider-background;
    }

    .ui.stackable.menu .left.menu,
    .ui.stackable.menu .left.item {
      margin-right: 0 !important;
    }
    .ui.stackable.menu .right.menu,
    .ui.stackable.menu .right.item {
      margin-left: 0 !important;
    }
    .ui.stackable.menu .center.menu,
    .ui.stackable.menu .center.item {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .ui.stackable.menu .right.menu,
    .ui.stackable.menu .center.menu,
    .ui.stackable.menu .left.menu {
      flex-direction: column;
    }
  }

  /*--------------
      Colors
  ---------------*/

  @each $key, $value in $colors {
    $color: $key;
    $c: map-get($value, color);

    @if not ($color==secondary) {
      .ui.ui.menu .#{$key + ""}.active.active.active.item,
      .ui.ui.#{$key + ""}.menu .active.active.active.item:hover,
      .ui.ui.#{$key + ""}.menu .active.active.active.item {
        @if not ($menu-secondary-pointing-active-border-color == currentColor) {
          border-color: $c;
        }
        color: $c;
      }
    }
  }

  @if($use-menu-variation-inverted) {
    /*--------------
        Inverted
    ---------------*/

    .ui.inverted.menu {
      border: $menu-inverted-border;
      background: $menu-inverted-background;
      box-shadow: $menu-inverted-box-shadow;
    }

    /* Menu Item */
    .ui.inverted.menu .item,
    .ui.inverted.menu .item > a:not(.ui) {
      background: $menu-inverted-item-background;
      color: $menu-inverted-item-text-color;
    }
    .ui.inverted.menu .item.menu {
      background: $menu-inverted-sub-background;
    }

    /*--- Border ---*/
    .ui.inverted.menu .item:before {
      background: $menu-inverted-divider-background;
    }
    .ui.vertical.inverted.menu .item:before {
      background: $menu-inverted-vertical-divider-background;
    }

    /* Sub Menu */
    .ui.vertical.inverted.menu .menu .item,
    .ui.vertical.inverted.menu .menu .item a:not(.ui) {
      color: $menu-inverted-sub-color;
    }

    /* Header */
    .ui.inverted.menu .header.item {
      margin: 0;
      background: $menu-inverted-header-background;
      box-shadow: none;
    }

    /* Disabled */
    .ui.ui.inverted.menu .item.disabled {
      color: $inverted-disabled-text-color;
    }

    /*--- Hover ---*/
    .ui.link.inverted.menu .item:hover,
    .ui.inverted.menu .dropdown.item:hover,
    .ui.inverted.menu .link.item:hover,
    .ui.inverted.menu a.item:hover {
      background: $menu-inverted-hover-background;
      color: $menu-inverted-hover-color;
    }
    .ui.vertical.inverted.menu .item .menu a.item:hover,
    .ui.vertical.inverted.menu .item .menu .link.item:hover {
      background: $menu-inverted-sub-background;
      color: $menu-inverted-sub-hover-color;
    }

    /*--- Pressed ---*/
    .ui.inverted.menu a.item:active,
    .ui.inverted.menu .link.item:active{
      background: $menu-inverted-pressed-background;
      color: $menu-inverted-pressed-color;
    }

    /*--- Active ---*/
    .ui.inverted.menu .active.item {
      background: $menu-inverted-active-background;
      color: $menu-inverted-active-color !important;
    }
    .ui.inverted.vertical.menu .item .menu .active.item {
      background: $menu-inverted-sub-active-background;
      color: $menu-inverted-sub-active-color;
    }
    .ui.inverted.pointing.menu .active.item:after {
      background: $menu-inverted-arrow-active-color;
      margin: 0 !important;
      box-shadow: none !important;
      border: none !important;
    }

    /*--- Active Hover ---*/
    .ui.inverted.menu .active.item:hover {
      background: $menu-inverted-active-hover-background;
      color: $menu-inverted-active-hover-color !important;
    }
    .ui.inverted.pointing.menu .active.item:hover:after {
      background: $menu-inverted-arrow-active-hover-color;
    }

    .ui.ui.ui.inverted.pointing.menu .active.item:after{
      background-color: inherit;
    }
  }


  /*--------------
      Floated
  ---------------*/

  .ui.floated.menu {
    float: left;
    margin: 0 $menu-floated-distance 0 0;
  }
  .ui.floated.menu .item:last-child:before {
    display: none;
  }

  .ui.right.floated.menu {
    float: right;
    margin: 0 0 0 $menu-floated-distance;
  }

  @if $use-menu-variation-inverted {
    /*--------------
        Inverted
    ---------------*/
    @each $key, $value in $colors {
      $color: $key;
      $c: map-get($value, color);
      $h: map-get($value, hover);

      @if not ($color == secondary) {
        .ui.ui.inverted.menu .#{$key + ""}.active.item,
        .ui.ui.inverted.#{$key + ""}.menu {
          background-color: $c;
        }
        .ui.inverted.#{$key + ""}.menu .item:before {
          background-color: $menu-inverted-colored-divider-background;
        }
        .ui.ui.inverted.#{$key + ""}.menu .active.item {
          background-color: $menu-inverted-colored-active-background;
        }
        .ui.inverted.pointing.#{$key + ""}.menu .active.item {
          background-color: $h;
        }
      }
    }
  }

  /*--------------
      Fitted
  ---------------*/

  .ui.fitted.menu .item,
  .ui.fitted.menu .item .menu .item,
  .ui.menu .fitted.item {
    padding: 0;
  }
  .ui.horizontally.fitted.menu .item,
  .ui.horizontally.fitted.menu .item .menu .item,
  .ui.menu .horizontally.fitted.item {
    padding-top: $menu-item-vertical-padding;
    padding-bottom: $menu-item-vertical-padding;
  }
  .ui.vertically.fitted.menu .item,
  .ui.vertically.fitted.menu .item .menu .item,
  .ui.menu .vertically.fitted.item {
    padding-left: $menu-item-horizontal-padding;
    padding-right: $menu-item-horizontal-padding;
  }

  /*--------------
    Borderless
  ---------------*/

  .ui.borderless.menu .item:before,
  .ui.borderless.menu .item .menu .item:before,
  .ui.menu .borderless.item:before {
    background: none !important;
  }

  /*-------------------
        Compact
  --------------------*/

  .ui.compact.menu {
    display: inline-flex;
    margin: 0;
    vertical-align: middle;
  }
  .ui.compact.vertical.menu {
  /* IE hack to make dropdown icons appear inline */
    display: -ms-inline-flexbox !important;
    display: inline-block;
  }
  .ui.compact.menu:not(.secondary) .item:last-child {
    border-radius: 0 $menu-border-radius $menu-border-radius 0;
  }
  .ui.compact.menu .item:last-child:before {
    display: none;
  }
  .ui.compact.vertical.menu {
    width: auto !important;
  }
  .ui.compact.vertical.menu .item:last-child::before {
    display: block;
  }

  /*-------------------
          Fluid
  --------------------*/

  .ui.menu.fluid,
  .ui.vertical.menu.fluid {
    width: 100% !important;
  }


  /*-------------------
        Evenly Sized
  --------------------*/

  .ui.item.menu,
  .ui.item.menu .item {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
    justify-content: center;
  }
  .ui.attached.item.menu:not(.tabular) {
    margin: 0 $menu-attached-horizontal-offset !important;
  }

  .ui.item.menu .item:last-child:before {
    display: none;
  }

  .ui.menu.two.item .item {
    width: 50%;
  }
  .ui.menu.three.item .item {
    width: 33.333%;
  }
  .ui.menu.four.item .item {
    width: 25%;
  }
  .ui.menu.five.item .item {
    width: 20%;
  }
  .ui.menu.six.item .item {
    width: 16.666%;
  }
  .ui.menu.seven.item .item {
    width: 14.285%;
  }
  .ui.menu.eight.item .item {
    width: 12.500%;
  }
  .ui.menu.nine.item .item {
    width: 11.11%;
  }
  .ui.menu.ten.item .item {
    width: 10.0%;
  }
  .ui.menu.eleven.item .item {
    width: 9.09%;
  }
  .ui.menu.twelve.item .item {
    width: 8.333%;
  }

  /*--------------
      Fixed
  ---------------*/

  .ui.menu.fixed {
    position: fixed;
    z-index: 101;
    margin: 0;
    width: 100%;
  }
  .ui.menu.fixed,
  .ui.menu.fixed .item:first-child,
  .ui.menu.fixed .item:last-child {
    border-radius: 0 !important;
  }

  .ui.fixed.menu,
  .ui[class*="top fixed"].menu {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
  }
  .ui[class*="top fixed"].menu {
    border-top: none;
    border-left: none;
    border-right: none;
  }
  .ui[class*="right fixed"].menu {
    border-top: none;
    border-bottom: none;
    border-right: none;
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    width: auto;
    height: 100%;
  }
  .ui[class*="bottom fixed"].menu {
    border-bottom: none;
    border-left: none;
    border-right: none;
    bottom: 0;
    left: 0;
    top: auto;
    right: auto;
  }
  .ui[class*="left fixed"].menu {
    border-top: none;
    border-bottom: none;
    border-left: none;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: auto;
    height: 100%;
  }

  /* Coupling with Grid */
  .ui.fixed.menu + .ui.grid {
    padding-top: $menu-fixed-preceding-grid-margin;
  }


  @if($use-menu-type-pointing) {
    /*-------------------
          Pointing
    --------------------*/

    .ui.pointing.menu .item:after {
      visibility: hidden;
      position: absolute;
      content: '';
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
      background: none;

      margin: ($menu-arrow-border-width / 2) 0 0;
      width: $menu-arrow-size;
      height: $menu-arrow-size;

      border: none;
      border-bottom: $menu-arrow-border;
      border-right: $menu-arrow-border;

      z-index: $menu-arrow-z-index;
      transition: $menu-arrow-transition;
    }
    .ui.vertical.pointing.menu .item:after {
      position: absolute;
      top: 50%;
      right: 0;
      bottom: auto;
      left: auto;

      transform: translateX(50%) translateY(-50%) rotate(45deg);
      margin: 0 (-$menu-arrow-border-width / 2) 0 0;

      border: none;
      border-top: $menu-arrow-border;
      border-right: $menu-arrow-border;
    }
    .ui.pointing.menu .ui.dropdown .menu .item:after,
    .ui.vertical.pointing.menu .ui.dropdown .menu .item:after {
      display: none;
    }

    /* Active */
    .ui.pointing.menu .active.item:after {
      visibility: visible;
    }
    .ui.pointing.menu .active.dropdown.item:after {
      visibility: hidden;
    }

    /* Don't double up pointers */
    .ui.pointing.menu .dropdown.active.item:after,
    .ui.pointing.menu .active.item .menu .active.item:after {
      display: none;
    }

    /* Colors */
    .ui.pointing.menu .active.item:hover:after {
      background-color: $menu-arrow-hover-color;
    }
    .ui.pointing.menu .active.item:after {
      background-color: $menu-arrow-active-color;
    }
    .ui.pointing.menu .active.item:hover:after {
      background-color: $menu-arrow-active-hover-color;
    }

    .ui.vertical.pointing.menu .active.item:hover:after {
      background-color: $menu-arrow-vertical-hover-color;
    }
    .ui.vertical.pointing.menu .active.item:after {
      background-color: $menu-arrow-vertical-active-color;
    }
    .ui.vertical.pointing.menu .menu .active.item:after {
      background-color: $menu-arrow-vertical-sub-color;
    }

    @if($use-menu-variation-inverted) {
      @each $key, $value in $colors {
        @if(index(join($main-colors-names, $use-menu-variation-colors), $key+'')) {
          $color: $key;
          $c: map-get($value, color);
        
          .ui.inverted.pointing.menu .#{$key + ""}.active.item:after {
            background-color: $c;
          }
        }
      }
    }
  }



  @if($use-menu-variation-attached) {
    /*--------------
        Attached
    ---------------*/

    /* Middle */
    .ui.attached.menu {
      top: 0;
      bottom: 0;
      border-radius: 0;
      margin: 0 $menu-attached-horizontal-offset;
      width: $menu-attached-width;
      max-width: $menu-attached-width;
      box-shadow: $menu-attached-box-shadow;
    }
    .ui.attached + .ui.attached.menu:not(.top) {
      border-top: none;
    }

    /* Top */
    .ui[class*="top attached"].menu {
      bottom: 0;
      margin-bottom: 0;
      top: $menu-attached-top-offset;
      margin-top: $menu-vertical-margin;
      border-radius: $menu-border-radius $menu-border-radius 0 0;
    }
    .ui.menu[class*="top attached"]:first-child {
      margin-top: 0;
    }

    /* Bottom */
    .ui[class*="bottom attached"].menu {
      bottom: 0;
      margin-top: 0;
      top: $menu-attached-bottom-offset;
      margin-bottom: $menu-vertical-margin;
      box-shadow: $menu-attached-bottom-box-shadow;
      border-radius: 0 0 $menu-border-radius $menu-border-radius;
    }
    .ui[class*="bottom attached"].menu:last-child {
      margin-bottom: 0;
    }

    /* Attached Menu Item */
    .ui.top.attached.menu > .item:first-child {
      border-radius: $menu-border-radius 0 0 0;
    }
    .ui.bottom.attached.menu > .item:first-child {
      border-radius: 0 0 0 $menu-border-radius;
    }

    /* Tabular Attached */
    .ui.attached.menu:not(.tabular) {
      border: $menu-attached-border;
    }
    @if $use-menu-variation-inverted {
      .ui.attached.inverted.menu {
        border: none;
      }
    }
    .ui.attached.tabular.menu {
      margin-left: 0;
      margin-right: 0;
      width: 100%;
    }
  }

  /*--------------
      Sizes
  ---------------*/

  /* Mini */
  .ui.mini.menu {
    font-size: $menu-mini;
  }
  .ui.mini.vertical.menu:not(.icon) {
    width: $menu-mini-width;
  }
  .ui.mini.menu .dropdown {
    font-size: $menu-mini;
  }
  .ui.mini.menu .dropdown .menu > .item{
    font-size: $menu-mini;
  }

  /* Tiny */
  .ui.tiny.menu {
    font-size: $menu-tiny;
  }
  .ui.tiny.vertical.menu:not(.icon) {
    width: $menu-tiny-width;
  }
  .ui.tiny.menu .dropdown {
    font-size: $menu-tiny;
  }
  .ui.tiny.menu .dropdown .menu > .item{
    font-size: $menu-tiny;
  }

  /* Small */
  .ui.small.menu {
    font-size: $menu-small;
  }
  .ui.small.vertical.menu:not(.icon) {
    width: $menu-small-width;
  }
  .ui.small.menu .dropdown {
    font-size: $menu-small;
  }
  .ui.small.menu .dropdown .menu > .item{
    font-size: $menu-small;
  }

  /* Medium */
  .ui.menu {
    font-size: $medium;
  }
  .ui.vertical.menu {
    width: $menu-medium-width;
  }

  /* Large */
  .ui.large.menu {
    font-size: $menu-large;
  }
  .ui.large.vertical.menu:not(.icon) {
    width: $menu-large-width;
  }
  .ui.large.menu .dropdown {
    font-size: $menu-large;
  }
  .ui.large.menu .dropdown .menu > .item{
    font-size: $menu-large;
  }

  /* Huge */
  .ui.huge.menu {
    font-size: $menu-huge;
  }
  .ui.huge.vertical.menu:not(.icon) {
    width: $menu-huge-width;
  }
  .ui.huge.menu .dropdown {
    font-size: $menu-huge;
  }
  .ui.huge.menu .dropdown .menu > .item{
    font-size: $menu-huge;
  }

  /* Big */
  .ui.big.menu {
    font-size: $menu-big;
  }
  .ui.big.vertical.menu:not(.icon) {
    width: $menu-big-width;
  }
  .ui.big.menu .dropdown {
    font-size: $menu-big;
  }
  .ui.big.menu .dropdown .menu > .item{
    font-size: $menu-big;
  }

  /* Massive */
  .ui.massive.menu {
    font-size: $menu-massive;
  }
  .ui.massive.vertical.menu:not(.icon) {
    width: $menu-massive-width;
  }
  .ui.massive.menu .dropdown {
    font-size: $menu-massive;
  }
  .ui.massive.menu .dropdown .menu > .item{
    font-size: $menu-massive;
  }

  @if ($use-dropdown-variation-inverted) {
    /*-------------------
      Inverted dropdowns
    --------------------*/
    .ui.menu .ui.inverted.inverted.dropdown.item .menu {
      background: $menu-inverted-dropdown-background;
      box-shadow: $menu-inverted-dropdown-box-shadow;
    }

    .ui.menu .ui.inverted.dropdown .menu > .item {
      color: $menu-inverted-dropdown-item-color !important;
    }

    .ui.menu .ui.inverted.dropdown .menu > .active.item {
      background: $menu-inverted-dropdown-active-item-background !important;
      color: $menu-inverted-dropdown-active-item-color !important;
    }

    .ui.menu .ui.inverted.dropdown .menu > .item:hover {
      background: $menu-inverted-dropdown-hovered-item-background !important;
      color: $menu-inverted-dropdown-hovered-item-color !important;
    }

    .ui.menu .ui.inverted.dropdown .menu > .selected.item {
      background: $menu-inverted-dropdown-selected-item-background !important;
      color: $menu-inverted-dropdown-selected-item-color !important;
    }

    /* Vertical */
    .ui.vertical.menu .inverted.dropdown.item .menu {
      box-shadow: $menu-inverted-dropdown-box-shadow;
    }
  }
}

@import '../../themes/default/collections/menu.style';