@import '../settings/variables';
@import '../tools/mixins/position';

.c-side-nav {
  @include media-breakpoint-up(md) {
    padding-top: 8em;
  }
  padding: 6em 0;
  background-color: $color-secondary-dark;
  height: 100%;
  overflow: auto;
  position: relative;

  &__logo {
    color: $logo-color;
    font-size: 3.4em;
    padding-top: $logo-padding;
    padding-bottom: $logo-padding;
    text-align: center;
  }

  &__divider {
    border-top: $hairline solid $color-primary-deep;
    margin-top: $margin-medium;
    margin-bottom: $margin-medium;
    opacity: 0.5;
  }

  &__burger {
    height: 2em;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: fixed;
    z-index: 1;
    right: 1rem;
    top: 1rem;
  }

  @media (max-height: 650px) {
    &__logo {
      padding-top: $margin-small;
      padding-bottom: $margin-small;
    }

    &__divider {
      margin-top: $margin-small;
      margin-bottom: $margin-small;
    }
  }
}