/*******************************
            Content
*******************************/

:host {
  display: block;
  font-size: inherit;
  padding: 0rem;

  --nav-menu-title-color: #FFF;
  --nav-menu-title-font-size: 14px;
  --nav-menu-title-padding: var(--compact-spacing) 0rem;

  --nav-menu-description-font-size: 12px;
  --nav-menu-description-color: var(--standard-40);
  --nav-menu-description-distance: var(--compact-spacing);

  --nav-menu-title-icon-font-size: 18px;
  --nav-menu-title-icon-color: inherit;
  --nav-menu-title-icon-opacity: 0.4;
  --nav-menu-title-icon-width: 1.5rem;
  --nav-menu-title-icon-distance: var(--compact-spacing);

  --nav-menu-title-icon-active-opacity: 1;

  --nav-menu-title-hover-color: var(--standard-100);
  --nav-menu-title-active-color: var(--standard-100);

  --nav-menu-nav-icon-icon-opacity: 0.3;
  --nav-menu-nav-icon-icon-font-size: 12px;

  --nav-menu-content-indent-distance: 0.5rem;
  --nav-menu-content-space-after: var(--compact-spacing);

  --nav-menu-content-icon-indent-distance: var(--compact-spacing);

  --nav-menu-sub-title-font-size: 13px;
  --nav-menu-sub-title-padding: 6px 0px;
  --nav-menu-sub-title-color: var(--nav-menu-title-color);
  --nav-menu-sub-title-active-color: var(--nav-menu-title-active-color);

  --nav-menu-sub-content-indent-distance: 0.25rem;

  --nav-menu-item-font-size: 13px;
  --nav-menu-item-spacing: 6px;
  --nav-menu-item-color: var(--standard-40);

  --nav-menu-nested-item-color: var(--standard-40);

  --nav-menu-item-hover-color: var(--standard-90);
  --nav-menu-item-current-color: var(--primary-20-invariant);

  --nav-menu-search-margin: var(--compact-spacing) 0;

  --nav-menu-highlight-color: var(--primary-text-color);
  --nav-menu-highlight-underline-color: var(--primary-text-color);

  --nav-menu-message-color: var(--standard-40);
  --nav-menu-message-font-size: var(--small);

  --nav-menu-selected-background: oklch(0.72 0.11 243.47 / 0.29);
  --nav-menu-selected-vertical-padding: 3px;
  --nav-menu-selected-horizontal-padding: 5px;
  --nav-menu-selected-border-radius: var(--border-radius);
  --nav-menu-selected-color: var(--primary-text-color);
}

*,
:before,
:after {
  box-sizing: border-box;
}

a {
  outline: none;
}


.title {
  cursor: auto;
  display: flex;
  flex-direction: row;
  text-align: left;
  line-height: 1;
  font-size: var(--nav-menu-title-font-size);
  text-transform: none;
  font-weight: bold;
  align-items: center;
  padding: var(--nav-menu-title-padding);
  text-decoration: none;
  color: var(--nav-menu-title-color);

  &[href] {
    cursor: pointer;

    &:hover {
      color: var(--nav-menu-title-hover-color);

      .icon {
        opacity: var(--nav-menu-title-icon-active-opacity);
      }
    }
  }

  &:not(.expandable) {
    color: var(--nav-menu-title-active-color);
  }

  .description {
    float: right;
    color: var(--nav-menu-description-color);
    margin-left: var(--nav-menu-description-distance);
    font-size: var(--nav-menu-description-font-size);
  }

  .nav-icon {
    opacity: var(--nav-menu-nav-icon-icon-opacity);
    font-size: var(--nav-menu-nav-icon-icon-font-size);
    transition: transform 0.3s ease;
    transform: rotate(0deg);
    width: auto;
    margin-right: 0px;
    margin-left: auto;
  }
}
.title {
  .icon {
    display: block;
    width: var(--nav-menu-title-icon-width);
    flex: 0 0 auto;
    text-align: center;
    margin-right: var(--nav-menu-title-icon-distance);
    font-size: var(--nav-menu-title-icon-font-size);
    color: var(--nav-menu-title-icon-color);
    opacity: var(--nav-menu-title-icon-opacity);
  }
  + .content {
    padding-left: var(--nav-menu-content-indent-distance);
  }
  + .indented.content {
    padding-left: var(--nav-menu-content-icon-indent-distance);
  }
}

/* Nested Menu */
.content {

  &.active + .title {
    padding-top: var(--nav-menu-content-space-after);
  }


  .menu {
    display: flex;
    flex-direction: column;

    .item {
      display: block;
      text-decoration: none;
      color: var(--nav-menu-item-color);
      line-height: 1;
      font-size: var(--nav-menu-item-font-size);
      padding: var(--nav-menu-item-spacing) 0px;

      &.title {
        display: flex;
        font-size: var(--nav-menu-sub-title-font-size);
        padding: var(--nav-menu-sub-title-padding);
        color: var(--nav-menu-sub-title-color);

        &:first-child {
          padding-top: 0;
        }
        + .content {
          padding-left: var(--nav-menu-sub-content-indent-distance) !important;
        }

        &.active {
          color: var(--nav-menu-sub-title-active-color);
        }
      }
    }

    /* Third Level Menu */
    .content .menu {

      .item {
        padding: 5px 0px;
      }

    }
  }
}


/*******************************
            States
*******************************/

.title {
  &.expandable:hover {
    transition: 0.3s color ease;
    color: var(--nav-menu-title-hover-color);

  }
  &.active {
    color: var(--nav-menu-title-active-color);

    .icon {
      opacity: var(--nav-menu-title-icon-active-opacity);
    }
    .nav-icon {
      opacity: 0.8;
    }
    .nav-icon[icon="chevron-down"] {
      transform: rotate(180deg);
    }
  }
  &.current {
    cursor: default;
    color: var(--primary-text-color);

    &[href] {
      cursor: pointer;
    }
  }
}
.content {

  opacity: 0;
  overflow: hidden;
  transition: opacity 0.2s ease;
  height: 0px;

  .title.active {
    color: var(--nav-menu-title-active-color);
  }

  &.active {
    opacity: 1;
    overflow: visible;
    height: auto;
  }

  .menu {
    .item:hover {
      color: var(--nav-menu-item-hover-color);
    }
    .current.item {
      cursor: default;
      color: var(--nav-menu-item-current-color);
    }
    .current.item[href] {
      cursor: pointer;
    }
    .menu {
      .item:not(:hover):not(.current):not(.active):not(.selected) {
        color: var(--nav-menu-nested-item-color) !important;
      }
    }
  }
}

/*******************************
           Variations
*******************************/

.dark.menu {
  --nav-menu-description-color: var(--white-40);
  --nav-menu-title-hover-color: var(--white-100);
  --nav-menu-title-active-color: var(--white-100);
  --nav-menu-nested-item-color: var(--white-40);
  --nav-menu-item-hover-color: var(--white-90);
  --nav-menu-no-results-color: var(--white-40);
}
.aligned.menu {
  --nav-menu-content-icon-indent-distance: calc(var(--nav-menu-title-icon-width) + var(--nav-menu-title-icon-distance));
}


/* Search  */
.search {
  display: block;
  margin: var(--nav-menu-search-margin);
}

.message {
  font-size: var(--nav-menu-message-font-size);
  color: var(--nav-menu-message-color);
  padding: var(--nav-menu-item-spacing) 0;
  text-align: center;
  font-style: italic;
  margin-bottom: var(--compact-spacing);
}

.highlight {
  color: var(--nav-menu-highlight-color);
  box-shadow: 0px 1px 0px 0px var(--nav-menu-highlight-underline-color);
}

.selected {
  position: relative;
  color: var(--nav-menu-selected-color) !important;

  &::before {
    position: absolute;
    z-index: -1;
    content: '';
    pointer-events: none;

    top: 0px; /* items have spacing as padding already */
    height: 100%;

    left: calc(var(--nav-menu-selected-horizontal-padding) * -1);
    width: calc(100% + var(--nav-menu-selected-horizontal-padding) * 2);

    padding: var(--nav-menu-selected-verptical-padding) var(--nav-menu-selected-horizontal-padding);
    border-radius: var(--nav-menu-selected-border-radius);
    background-color: var(--nav-menu-selected-background);
  }

}