@import "../variables/colors";
@import "../variables/dimensions";

.rc-menu {
  border-radius: 5px;
  background-color: $menuBackgroundColor;
  border: 1px solid $menuBorderColor;
  padding: 0;
  overflow: hidden;

  .rc-menu__item-wrapper {
    list-style-type: none;
    border-style: solid;
    border-width: 0;
    border-color: $menuSubBorderColor;

    &:not(:last-child) {
      border-bottom-width: $menu-item-border-width;
      margin-bottom: $menu-item-maring-bottom;
    }
  }

  .rc-menu__item {
    display: block;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    text-decoration: none;
    font-size: 13px;
    padding: 25px 25px 25px 50px;
    color: $menuLinkColor;
    background-repeat: no-repeat;
    background: none;
    border: none;
    border-left: 4px solid transparent;
    cursor: pointer;
    appearance: none;

    &.rc-menu__item_active, &.rc-menu__item_active:hover {
      background-color: $menuActiveLinkBackgroundColor;
      color: $menuActiveLinkColor;
      border-left-color: $menuBorderLeftColor;

      .rc-menu__icon {
        color: $menuActiveIconColor;
      }
    }

    &.rc-menu__item_active:hover {
      color: $menuActiveLinkColorHover;
      border-left-color: $menuActiveBorderLeftColorHover;

      .rc-menu__icon {
        color: $menuActiveLinkColorHover;
      }
    }

    &:hover {
      border-left-color: $menuBorderLeftColorHover;
      color: $menuColorHover;

      .rc-menu__icon {
        color: $menuColorHover;
      }
    }

    &.rc-menu__item_nested {
      padding-top: 18px;
      padding-bottom: 18px;
      background-color: $menuNestedBackgroundColor;
      color: $menuNestedLinkColor;
      border-left: none;
      border-radius: 0;

      &.rc-menu__item_active {
        background-color: $menuNestedActiveLinkBackgroundColor;
        color: $menuNestedActiveLinkColor;

        .rc-menu__icon {
          color: $menuNestedActiveIconColor;
        }
      }

      &:hover:not(.rc-menu__item_active) {
        background-color: $menuNestedHoverLinkBackgroundColor;
        color: $menuNestedHoverLinkColor;

        .rc-menu__icon {
          color: $menuNestedHoverIconColor;
        }
      }
    }

    &.rc-menu__item_sub {
      padding: 15px 15px 15px 40px;
      color: $menuSubLinkColor;
      background-repeat: no-repeat;
      border-left: none;
      border-radius: 2px;

      &.rc-menu__item_active {
        background-color: $menuSubActiveLinkBackgroundColor;
        color: $menuSubActiveLinkColor;

        .rc-menu__icon {
          color: $menuSubActiveIconColor;
        }
      }

      &:hover:not(.rc-menu__item_active) {
        background-color: $menuSubHoverLinkBackgroundColor;
        color: $menuSubHoverLinkColor;

        .rc-menu__icon {
          color: $menuSubHoverIconColor;
        }
      }
    }
  }

  .rc-menu__icon {
    position: absolute;
    left: 15px;
    top: 50%;
    vertical-align: sub;
    font-size: 22px;
    margin-top: -18px;
    color: $menuIconColor;
  }

  &_nested {
    border-radius: 0;
    border: none;

    .rc-menu__item-wrapper {
      margin-bottom: 0;
      border-color: $menuNestedBorderColor;
    }

    .rc-menu__item {
      padding-left: 52px;
    }
  }

  &_submenu {
    border-radius: 0;
    background-color: $menuSubBackgroundColor;

    .rc-menu__item-wrapper {
      border-bottom-width: 0 !important;
    }

    .rc-menu__icon {
      font-size: 16px;
      margin-top: -13px;
      color: $menuSubIconColor;
    }
  }
}
