/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-menu-theme() {
  el-menu {
    background-color: el-theme(menu-background-color);

    ul.menu-items {
      margin: 0;
      padding: 0;
    }

    .menu-group,
    .menu-item a {
      font-family: el-theme(menu-text-font-family);
      font-size: el-theme(menu-text-font-size);
      font-weight: el-theme(menu-text-font-weight);
      line-height: el-theme(menu-text-line-height);
      padding: el-theme(menu-item-padding);
    }

    .menu-group,
    .menu-group el-icon.menu-icon {
      color: el-theme(menu-group-text-color);
    }

    .menu-item {
      a {
        color: el-theme(menu-text-color);
        border-radius: el-theme(menu-item-border-radius);
      }

      a.active {
        background-color: el-theme(menu-item-active-background-color);
        color: el-theme(menu-item-active-text-color);

        .menu-icon {
          color: el-theme(menu-item-icon-active-color);
        }
      }

      a:hover {
        background-color: el-theme(menu-item-hover-background-color);
        color: el-theme(menu-item-hover-text-color);
        cursor: el-theme(menu-item-hover-cursor);

        .menu-icon {
          color: el-theme(menu-item-icon-hover-color);
        }
      }

      .menu-icon {
        color: el-theme(menu-item-icon-color);
        font-size: el-theme(menu-item-icon-width);
        margin: el-theme(menu-item-icon-margin);
        width: 1em;
        text-align: center;
      }

      .expand-state {
        color: el-theme(menu-item-icon-color);
      }
    }

    $divider: el-theme(menu-item-divider-width) el-theme(menu-item-divider-style) el-theme(menu-item-divider-color);
    .menu-item {
      border-bottom: $divider;

      &:first-child {
        border-top: none;
      }
      &:last-child {
        border-bottom: none;
      }

      .menu-item:first-child {
        border-top: $divider;
      }
    }

    .menu-item > .menu-items {
      background-color: el-theme(menu-submenu-background-color);
      margin: el-theme(menu-submenu-margin);
      padding: el-theme(menu-submenu-padding);
    }

    .menu-item > .menu-items > .menu-item {
      background: el-theme(menu-submenu-background-color);
      color: el-theme(menu-submenu-text-color);

      a {
        border-color: el-theme(menu-submenu-item-border-color);
        border-style: el-theme(menu-submenu-item-border-style);
        border-width: el-theme(menu-submenu-item-border-width);
        padding: el-theme(menu-submenu-item-padding);
      }

      a.active {
        background-color: el-theme(menu-submenu-item-active-background-color);
        border-color: el-theme(menu-submenu-item-active-border-color);
        color: el-theme(menu-submenu-item-active-text-color);

        .menu-icon {
          color: el-theme(menu-submenu-item-icon-active-color);
        }
      }

      a:hover {
        background-color: el-theme(menu-submenu-item-hover-background-color);
        border-color: el-theme(menu-submenu-item-hover-border-color);
        color: el-theme(menu-submenu-item-hover-text-color);

        .menu-icon {
          color: el-theme(menu-submenu-item-icon-hover-color);
        }
      }

      a.active:hover {
        background-color: el-theme(menu-submenu-item-active-hover-background-color);
        border-color: el-theme(menu-submenu-item-active-hover-border-color);
        color: el-theme(menu-submenu-item-active-hover-text-color);

        .menu-icon {
          color: el-theme(menu-submenu-item-icon-active-hover-color);
        }
      }
    }

    .menu-item > .menu-items > .menu-group {
      &,
      & el-icon.menu-icon {
        color: el-theme(menu-group-text-color);
      }
    }
  }
}