$menu-title-color: createColor(lighten($dark-grey, 25%)) !default;
$menu-title-font-size: calculateRem(13.6) !default;
$menu-title-line-height: 1.5 !default;
$menu-title-padding: calculateRem(8) calculateRem(16) !default;
$menu-title-case: uppercase !default;

$menu-list-background: transparent !default;
$menu-list-color: var(--color-black) !default;
$menu-list-line-height: 1.5 !default;
$menu-list-padding: calculateRem(8) calculateRem(24) !default;
$menu-list-active-background: var(--color-primary) !default;
$menu-list-active-color: var(--color-primary-text) !default;
$menu-list-hover-background: createColor(rgba(192, 192, 192, 0.09)) !default;
$menu-list-hover-color: var(--color-black) !default;

$menu-divider-width: 1px !default;
$menu-divider-color: createColor(#e9ecef);
$menu-divider-margin: calculateRem(8) !default;

$menu-expandable-border-width: 1px !default;
$menu-expandable-border-color: createColor(#e9ecef) !default;
$menu-expandable-margin: calculateRem(12) !default;
$menu-expandable-padding-left: calculateRem(12) !default;
$menu-expandable-item-padding: 0 calculateRem(12) !default;

.menu {

  &__title {
    --font-color: #{$menu-title-color};
    --font-size: #{$menu-title-font-size};
    --line-height: #{$menu-title-line-height};
    --padding: #{$menu-title-padding};
    --case: #{$menu-title-case};
    color: var(--font-color);
    font-size: var(--font-size);
    line-height: var(--line-height);
    padding: var(--padding);
    margin: 0;
    text-transform: var(--case);
  }

  &__list {
    --background-color: #{$menu-list-background};
    --font-color: #{$menu-list-color};
    --active-background-color: #{$menu-list-active-background};
    --active-font-color: #{$menu-list-active-color};
    --hover-background-color: #{$menu-list-hover-background};
    --hover-font-color: #{$menu-list-hover-color};
    --item-padding: #{$menu-list-padding};
    --line-height: #{$menu-list-line-height};

    list-style: none;
    margin: 0;

    & > li.is-active:not(.is-expandable) > a, li.is-expandable.is-active > :first-child, li:not(.is-expandable) li.is-active > a {
      --background-color: var(--active-background-color);
      --font-color: var(--active-font-color);
    }

    li {
      > a {
        background-color: var(--background-color);
        color: var(--font-color);
        line-height: var(--line-height);

        &:hover {
          text-decoration: none;
        }
      }

      &.is-expandable {
        --expandable-item-padding: #{$menu-expandable-item-padding};
        --border-color: #{$menu-expandable-border-color};
        --border-width: #{$menu-expandable-border-width};
        --padding-left: #{$menu-expandable-padding-left};
        --margin: #{$menu-expandable-margin};

        & > :first-child {
          display: block;
          padding: var(--item-padding);
        }

        &:not(.is-active) > :first-child:hover {
          --background-color: var(--hover-background-color);
          --font-color: var(--hover-font-color);
        }

        &.is-active > ul {
          display: block;
        }

        & > ul {
          border-left: var(--border-width) solid var(--border-color);
          list-style: none;
          display: none;
          margin: var(--margin);
          padding-left: var(--padding-left);

          li {
            padding: var(--expandable-item-padding);

            &.is-active {
              a {
                --background-color: var(--hover-background-color);
                --font-color: var(--hover-font-color);
              }
            }
          }
        }
      }

      &:not(.is-expandable) {
        ul {
          list-style: none;
        }
      }
    }

    li:not(.is-expandable) {
      cursor: pointer;

      &:not(.is-active) > a:hover {
         --background-color: var(--hover-background-color);
         --font-color: var(--hover-font-color);
      }

      a {
        display: block;
        padding: var(--item-padding);
      }
    }
  }

  &__divider {
    --border-width: #{$menu-divider-width};
    --border-color: #{$menu-divider-color};
    --margin: #{$menu-divider-margin};

    border-top: var(--border-width) solid var(--border-color);
    margin: var(--margin);
  }

}