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

#{class-vars.$base-class} {
  .menu-side-panel {
    margin: var(--spacing) 0 0 0;
    font-size: var(--font-size-xs);

    &:first-child {
      margin: 0;
    }
    &__header {
      font-size: var(--font-size);
    }
    &>ul {
      margin-left: calc(0px - var(--spacing));
    }
    ul {
      list-style-type: none;
      padding: 0;

      &:first-of-type {
        border-left: 1px solid #DBDBDB;
        margin-left: var(--spacing)
      }
    }
    .menu-item {
      &__title {
        a[href].menu-item__link-title {
          flex: 1 0 auto;
          max-width: 100%;
          box-sizing: border-box;
          padding: var(--spacing-2xs) var(--spacing);
          margin: 0;
          display: block;
          border-radius: var(--radius-circle);
          position: relative;
          transition: all var(--timing-quick) ease-in-out;

          &:hover {
            box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
            color: var(--primary-color);
          }
          &.menu-item--selected {
            font-weight: bold;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
            //a chiclet
            &::after {
              content: '';
              position: absolute;
              left: -3px;
              top: 0;
              width: 5px;
              height: 100%;
              background: var(--primary-color);
              border-radius: var(--radius-circle);
            }
          }
        }

        &-blank {
          padding: var(--spacing-2xs) var(--spacing);
        }
      }

      button {
        min-height: unset;
        min-width: unset;
      }
      &__button-title {
        flex: 1 1 auto;
        justify-content: flex-start;
        font-size: var(--font-size-xs);
        padding: var(--spacing-2xs) var(--spacing);
        line-height: 1.7;

        &:hover {
          box-shadow: inset 0 0 0 1000px var(--hover-gray-color);
        }
      }
      &__chevron {
        padding: var(--spacing-xs);
        svg {
          transition: transform var(--timing-quick) ease;
        }
      }
    }

    ul.vertical-menu {
      list-style-type: none;
      margin: 0;
      padding: 0;

      &.menu-item__sub-menu--open {
        border-left: none;
        a {
          padding-left: var(--spacing-xl);
        }
      }

      li.vertical-menu__item {
        span.menu-item__title, span.vertical-menu__title {
          a.vertical-menu__link-title.menu-item--selected {
            border-radius: 0 var(--radius-circle) var(--radius-circle) 0;
          }
        }
      }
    }
  }
}

@media screen and (max-width: #{media-size-vars.$media-size-tablet-landscape}) {
  #{class-vars.$base-class} {
    .menu-side-panel {
      .menu-item {
        &__title {
          a {
            &.menu-item--selected {
              //a chiclet
              &::after {
                left: 0;
              }
            }
          }
        }
      }
    }
  }
}