@use '@carbon/layout';
@use '@carbon/type';
@use '@openmrs/esm-styleguide/src/vars' as *;

.link > div a:nth-child(1) {
  height: layout.$spacing-09;
  padding: layout.$spacing-06 0 layout.$spacing-06 1.25rem;
  color: $ui-04;
  @extend .productiveHeading01;
  border-left: layout.$spacing-02 solid transparent;
}

:global(.omrs-breakpoint-gt-tablet) .link > div {
  padding-top: layout.$spacing-05;
}

:global(.omrs-breakpoint-gt-tablet) .link > div a:nth-child(1) {
  height: layout.$spacing-07;
  color: $ui-04;
  padding-left: layout.$spacing-05;
}

.link > div a:nth-child(1):hover {
  background-color: $ui-03;
  color: $ui-05;
  border-left: var(--brand-01);
}

.link > div a:nth-child(1):focus {
  background-color: $ui-03;
  outline: none;
  color: $ui-05;
  border-left: var(--brand-01);
}

.productiveHeading01 {
  @include type.type-style('heading-compact-01');
}