@use '@igo2/sdg-core' as sdg;
@use './lateral-menu-animation' as animation;

$spacer-8: var(--sdg-spacer-8);
$spacer-16: var(--sdg-spacer-16);

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

.sdg-lateral-menu {
  &-route-title {
    font-size: var(--sdg-font-size-sm);
    line-height: var(--sdg-line-height-sm);
    font-weight: var(--sdg-font-weight-bold);
    padding: $spacer-16 $spacer-8 $spacer-16 0;
    margin: 0;
    border-bottom: 1px solid var(--sdg-color-grey-light);

    &-mobile {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: none;
      background-color: var(--sdg-color-blue-pale);
      padding: $spacer-8;
      cursor: pointer;
    }

    &-text-mobile {
      font-family: var(--sdg-font-family-text);
      font-size: var(--sdg-font-size-md);
      color: var(--sdg-color-blue-piv);
      margin: 0;
      text-align: left;
      font-weight: var(--sdg-font-weight-semi-bold);
    }
  }

  &-route-title {
    display: block;

    @include sdg.media(mobile) {
      display: none;
    }
  }

  &-route-title-mobile {
    display: none;

    @include sdg.media(mobile) {
      display: flex;
      align-items: center;
    }
  }
}

@include animation.openClose(
  'sdg-lateral-menu-sections',
  'sdg-lateral-menu-sections-content'
);