@use "../theme.scss" as *;
@use "../icogram.scss" as *;

/* Commons */
.navigation {
  margin-bottom: $block-elem-vertical-gap;
  background-color: $navigation-bg-color;
  position: relative;

  & ul {
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  & .navigation-heading,
  & .navigation-heading:hover {
    color: $navigation-heading-color;
    background-color: $navigation-heading-bg-color;
    padding: 0.85em 1em;
    overflow: hidden;

    & > span {
      display: inline-block;
      font-weight: bold;
      font-size: 0.86em;
      white-space: nowrap;
    }
  }

  & .navigation-item,
  & .navigation-item:hover,
  & .navigation-item:active {
    outline: 0;

    &.disabled {
      & .navigation-item-label {
        color: $navigation-item-disabled-color;
        background-color: $navigation-item-disabled-bg-color;
        cursor: default;
      }
    }
  }

  & .navigation-item-label {
    margin-right: 0;
    color: inherit;
    outline: 0;
    text-decoration: none;
    display: block;
    padding: 0.85em 1.25em;
    cursor: pointer;
    font-size: 0.98em;
    font-weight: normal;
    overflow: hidden;

    & .text {
      letter-spacing: 1px;
      white-space: nowrap;
    }
  }

  & .close {
    & .navigation {
      display: none;
    }
  }

  /* Nested vertical menus */
  & .navigation {
    margin-bottom: 0;

    // Level 2
    & .navigation-item {
      & .navigation-item-label {
        padding-left: 3.0em;
      }

      // Level 3
      & .navigation {
        & .navigation-item {
          & .navigation-item-label {
            padding-left: 6em;
          }
        }

      }
    }
  }
}

/* Horizontal */
.navigation {
  & .hor {
    flex-wrap: nowrap;

    & .navigation-item-label {
      padding: 0.85em 1em;
    }
  }
}

.navigation {
  & .navigation-item {
    color: $navigation-item-1st-level-color;
    background-color: $navigation-item-1st-level-bg-color;
    &:focus-visible {
      & > .navigation-item-label {
        color: $navigation-item-1st-level-hover-color;
        background-color: $navigation-item-1st-level-hover-bg-color;
      }
    }
    & > .navigation-item-label {
      &:hover {
        color: $navigation-item-1st-level-hover-color;
        background-color: $navigation-item-1st-level-hover-bg-color;
      }
    }

    &.selected {
      & > .navigation-item-label {
        color: $navigation-item-1st-level-selected-color;
        background-color: $navigation-item-1st-level-selected-bg-color;
      }
    }
  }
}