/* stylelint-disable no-descending-specificity */
@import '@zendeskgarden/css-variables';
@import '_selectors';

:root {
  --zd-menu-hidden-transition:
    opacity .2s ease-in-out,
    .2s visibility 0s linear;
  --zd-menu__item-disabled-color: var(--zd-color-grey-400);
  --zd-menu__item-disabled--add-background-image: svg-load('16/plus-stroke.svg', color: var(--zd-menu__item-disabled-color));
  --zd-menu__item-disabled--checked-background-image: svg-load('16/check-lg-stroke.svg', color: var(--zd-menu__item-disabled-color));
  --zd-menu__item-disabled--next-background-image: svg-load('16/chevron-right-stroke.svg', color: var(--zd-menu__item-disabled-color));
  --zd-menu__item-disabled--previous-background-image: svg-load('16/chevron-left-stroke.svg', color: var(--zd-menu__item-disabled-color));
  --zd-menu__item-hovered-background-color: var(--zd-menu-accent-color-hovered);
}

/* 1. Bump stacking context in order to prevent sibling menu items from
 *    interfering with sub-menu pseudo styling.
 * 2. Prevent arrow from showing through on opacity transition. */

.c-menu__item:--menu-hovered,
.c-menu__item:--menu-focused {
  background-color: var(--zd-menu__item-hovered-background-color);
  text-decoration: none;
}

.c-menu__item:--menu-focused {
  outline: none;
}

/* stylelint-disable selector-max-specificity */
.c-menu .c-menu__item:--menu-disabled {
  cursor: default;
  color: var(--zd-menu__item-disabled-color);
}

.c-menu .c-menu__item:--menu-disabled:--menu-hovered,
.c-menu .c-menu__item:--menu-disabled:--menu-focused {
  background-color: inherit;
}

.c-menu .c-menu__item:--menu-checked:--menu-disabled::before {
  background-image: var(--zd-menu__item-disabled--checked-background-image);
}

.c-menu .c-menu__item.c-menu__item--add:--menu-disabled::before {
  background-image: var(--zd-menu__item-disabled--add-background-image);
}

.c-menu .c-menu__item.c-menu__item--next:--menu-disabled::before {
  background-image: var(--zd-menu__item-disabled--next-background-image);
}

.c-menu .c-menu__item.c-menu__item--previous:--menu-disabled::before {
  background-image: var(--zd-menu__item-disabled--previous-background-image);
}
/* stylelint-enable selector-max-specificity */

.c-menu__item:--menu-expanded {
  z-index: 1; /* [1] */
}

.c-menu:--menu-hidden {
  display: inline-block;
  transition: var(--zd-menu-hidden-transition);
  visibility: hidden;
  opacity: 0;
}

.c-menu:--menu-hidden:--menu-around {
  display: none; /* [2] */
}
/* stylelint-enable no-descending-specificity */