@use "../../../1-settings/class-vars";
@use "../../../2-tools/tools-index";

#{class-vars.$base-class} {
  ul.vertical-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .vertical-menu {
    font-size: var(--font-size-xs);

    &__header {
      font-size: var(--font-size);

      & + ul {
        margin-left: calc(0px - var(--spacing));
      }
    }
    li > ul {
      margin-left: var(--spacing-s);
    }

    &__title {
      display: flex;
      flex-direction: row;
      align-items: center;
      position: relative;

      .menu-item__chevron {
        min-height: unset;
        min-width: unset;
        padding: var(--spacing-xs);
      }

      &__plain {
        margin: var(--spacing-2xs) 0;
        padding: var(--spacing-2xs) var(--spacing);
      }
    }

    .menu-item__title {
      position: relative;
    }

    &__link-title {
      &.menu-item--selected {
        & + .menu-chiclet {
          height: calc(100% - var(--spacing-xs));
          width: 5px;
          background: var(--form-ele-color);
          display: block;
          position: absolute;
          border-radius: var(--radius-circle);
          left: -3px;
        }
      }
    }

    button.vertical-menu__button-title,
    a[href].vertical-menu__link-title,
    button.menu-item__button-title,
    a[href].menu-item__link-title {
      border-radius: var(--radius-circle);
      border: none;
      box-shadow: none;
      box-sizing: border-box;
      color: var(--gray-color);
      display: flex;
      font-size: var(--font-size-xs);
      justify-content: flex-start;
      line-height: 1.7;
      margin: var(--spacing-2xs) 0;
      min-height: unset;
      padding: var(--spacing-2xs) var(--spacing);
      text-align: left;
      text-decoration: none;
      transition: background-color var(--timing-quick) ease-in-out;
      width: 100%;
      position: relative;

      &:hover {
        background: var(--hover-gray-color);
        color: var(--primary-color);
        box-shadow: none;
      }
      &:active {
        transform: none;
      }
      &.menu-item--selected_parent {
        font-weight: bold;
      }
      &.menu-item--selected {
        font-weight: bold;
        box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
        color: var(--primary-color);
      }
    }
    a.vertical-menu__link-title {
      &:hover {
        box-shadow: none;
      }
    }
    &__link-text {
      flex: 1 0 auto;
      max-width: 100%;
    }
    &__divider {
      display: block;
      margin: var(--spacing-s) var(--spacing-s);
      height: 1px;
      background-color: var(--gray-medium-light-color);
    }
    & .utds-icon-before-chevron-right {
      font-size: 0.65rem;
      line-height: 0.5;
      transform: rotate(0deg);
      transition: transform var(--timing-quick) ease;
      &::before {
        margin-right: 0;
        margin-left: var(--spacing-xs);
      }
      &.is-open {
        transform: rotate(90deg);
      }
    }

    .flyout-menu {
      padding: 0;

      & > ul > li {
        padding: 0 var(--spacing-s);

        &:first-child {
          padding-top: var(--spacing-s);
        }

        &:last-child {
          padding-bottom: var(--spacing-s);
        }
      }
    }
  }

  .menu-item--mega-menu {
    .vertical-menu {
      li > ul {
        margin-left: 0;
      }
    }
  }
}