@use "@carbon/styles/scss/type";
@import "../vars";

.leftNav {
  border-right: 1px solid $ui-03;
  padding-top: 1rem;

  // Left nav menu item
  :global(.cds--side-nav__link) {
    color: $text-02;
    @include type.type-style("heading-compact-01");

    &:focus,
    &:hover {
      background-color: $ui-01;
    }

    // Active menu item
    &:global(.active-left-nav-link) {
      color: $ui-05;
      border-left: 0.25rem solid var(--brand-01);
      background-color: $ui-03;
      outline: none;
      padding: 0 0.75rem;
    }
  }
}

/* Desktop */
:global(.omrs-breakpoint-gt-tablet) {
  :global(.cds--side-nav__link) {
    height: 2rem;
  }
}

/* Tablet */
:global(.omrs-breakpoint-lt-desktop) {
  :global(.cds--side-nav__link) {
    height: 3rem;
  }
}