@use '@igo2/sdg-core' as sdg;

$spacer-8: var(--sdg-spacer-8);
$blue-pale: var(--sdg-color-blue-pale);
$font-size-sm: var(--sdg-font-size-sm);
$font-size-md: var(--sdg-font-size-md);
$line-height-sm: var(--sdg-line-height-sm);
$line-height-md: var(--sdg-line-height-md);

:host {
  display: flex;
  flex-direction: column;
}

.sdg-lateral-menu {
  &-item {
    font-size: $font-size-sm;
    line-height: $line-height-sm;
    border-bottom: 1px solid var(--sdg-color-grey-light);
    width: 100%;
    padding: var(--sdg-spacer-16) $spacer-8;
    text-decoration: none;

    @include sdg.media(mobile) {
      font-size: $font-size-md;
      line-height: $line-height-md;
      padding: $spacer-8 0 $spacer-8 var(--sdg-spacer-24);
      background-color: $blue-pale;
      border: none;
    }

    &.--active-item {
      background-color: $blue-pale;
      font-weight: bold;
    }

    &:hover:not(.--active-item) {
      background-color: color-mix(in srgb, $blue-pale 50%, transparent);

      @include sdg.media(mobile) {
        background-color: $blue-pale;
      }
    }

    &:focus-visible {
      outline: solid 2px var(--sdg-color-blue-light);
      outline-offset: -2px;
    }
  }

  &-section-item {
    font-size: $font-size-sm;
    line-height: $line-height-sm;
    padding: $spacer-8 0;
    text-decoration: none;

    @include sdg.media(mobile) {
      font-size: $font-size-md;
      line-height: $line-height-md;
    }

    &:hover {
      text-decoration: underline;
    }

    &:focus-visible {
      outline: solid 2px var(--sdg-color-blue-light);
      outline-offset: 6px;
    }

    &.--active-item {
      font-weight: bold;
    }
  }
}