@use '@carbon/type';
@use '@carbon/layout';
@use '../vars' as *;

.leftNav {
  border-inline-end: 1px solid $color-gray-30;
  padding-top: layout.$spacing-05;

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

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

    // Active menu item
    &:global(.active-left-nav-link) {
      color: $ui-05;
      border-inline-start: layout.$spacing-02 solid var(--brand-01);
      background-color: $ui-03;
      outline: none;
      padding: 0 layout.$spacing-04;
    }
  }
}

/* Desktop */
:global(.omrs-breakpoint-gt-tablet) {
  :global(.cds--side-nav__link) {
    height: layout.$spacing-07;
  }
}

/* Tablet */
:global(.omrs-breakpoint-lt-desktop) {
  :global(.cds--side-nav__link) {
    height: layout.$spacing-09;
  }
}