// scss-lint:disable SelectorDepth unknownProperties
// scss-lint:disable NestingDepth SelectorFormat

.sci--layout--left-menu-container {
  background-color: $color-white;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 1.5rem 1rem 0;
  width: 100%;

  .sci--layout--menu-item {
    @include font-small;
    align-items: center;
    color: $color-black;
    cursor: pointer;
    display: flex;
    gap: 1em;
    height: 36px;
    margin: .25em 0;
    padding: 0 1em;
    text-decoration: none;
    width: 100%;

    .fas {
      display: inline-block;
      font-size: 1.125rem;
      width: 16px;
    }

    .show-submenu {
      cursor: pointer;
      display: none;
      margin-left: auto;
    }

    .dot {
      align-items: center;
      display: flex;
      height: 16px;
      justify-content: center;
      width: 16px;

      &::after {
        background-color: $color-black;
        border-radius: 50%;
        content: "";
        height: 3px;
        width: 3px;
      }
    }

    &[data-active='true'] {
      background-color: $color-gainsboro;
      box-shadow: inset 4px 0 0 $brand-primary;
    }

    &[data-disabled='true'] {
      background-color: initial;
      box-shadow: none;
      cursor: not-allowed;
      opacity: .65;
      pointer-events: none;
    }

    &[data-submenu='true'] {
      .show-submenu {
        display: initial;
      }
    }
  }

  .sci--layout--menu-submenu {
    height: 0;
    overflow: hidden;
    transition: .4s $timing-function-sharp;

    &[data-collapsed=false] {
      height: calc(var(--submenu-items) * (36px + .5em));
    }
  }
}