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

.sci--layout--left-menu-container {
  background-color: $color-white;
  border-right: 1px solid var(--sn-sleepy-grey);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem .5rem;
  width: 100%;

  .tooltip {
    white-space: nowrap;
  }

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

    &:not([data-active='true']):hover {
      background-color: var(--sn-super-light-grey);
    }

    &[data-active='true'] {
      background-color: var(--sn-super-light-blue);
    }

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