@use '../../sass/abstracts' as *;
@use '../../sass/abstracts/mixins';

#{$component-prefix}sidebar-container {
  display: block;
  position: fixed;
  z-index: 700;
  top: 0;
  bottom: 0;
  left: 0;
  overflow: initial;
  width: 100%;
  pointer-events: none;
  font-family: $font-family-body;

  &--pinned {
    @include media-breakpoint-up(md) {
      overflow: auto;
      width: $sidebar-width-desktop;
    }
  }

  #{$component-prefix}sidebar {
    position: absolute;
    max-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    background-color: #b7dcc4;
    transition: all $transition-effect $transition-duration; // toggle sidebar animation

    @include body-medium;

    @include media-breakpoint-up(sm) {
      width: $sidebar-width;
      left: -$sidebar-width;
    }

    &__header {
      position: relative;
      height: 4.25rem;
      display: flex;
      justify-content: space-between;
      padding-left: 2.5rem;
      padding-right: 2.5rem;

      > * {
        align-self: center;
      }

      h5 {
        margin: 0;
      }
    }

    &__content {
      background-color: $white;
    }

    &__close-icon {
      &:after {
        @include unity-symbols('cancel', 1.5rem);
      }
    }

    &__profile-icon {
      &:before {
        @include unity-symbols('account-circle', 1.5rem);
        padding-right: 0.5rem;
        vertical-align: top;
      }
    }

    &__logo {
      height: 1.5rem;
      vertical-align: middle;
    }

    &__label {
      @include headline-medium;
      display: inline-block;
      color: $sodra-black;
      margin-left: 2rem;
      margin-top: 0.313rem;
      margin-bottom: 0.75rem;

      &:first-child {
        margin-top: 2.5rem;
      }
    }
  }

  /*
Custom style for large sidebar
*/
  &--large {
    left: -$sidebar-width-large;

    &#{$component-prefix}sidebar-container--right {
      #{$component-prefix}sidebar {
        @include media-breakpoint-up(sm) {
          right: -$sidebar-width-large;
          width: $sidebar-width-large !important;
        }
      }
    }
  }

  /*
Custom style for is open modifier
*/
  &[aria-expanded='false'] {
    visibility: hidden; // prevent tabbing menu items when menu closed
  }

  &[aria-expanded='true'] {
    pointer-events: all;

    /* Even thoose that is not pinned*/
    @include media-breakpoint-down(xl) {
      background-color: rgba(0, 0, 0, 0.25);
      overflow-y: auto;
    }

    &:not(#{$component-prefix}sidebar-container--pinned) {
      background-color: rgba(0, 0, 0, 0.25);
      overflow-y: auto;
    }

    #{$component-prefix}sidebar {
      left: 0;
    }
  }

  &--pinned {
    @include media-breakpoint-up(md) {
      pointer-events: all;

      #{$component-prefix}sidebar {
        left: 0;
      }
      .js-toggle-open {
        display: none;
      }
    }
  }

  /*
Custom style for right sidebar
*/
  &--right {
    #{$component-prefix}sidebar {
      right: -100%;
      left: auto;
    }
  }
  /*
Custom style for is open and right modifier
*/
  &--right[aria-expanded='true'] {
    #{$component-prefix}sidebar {
      right: 0;
      left: auto;
    }
  }

  #{$component-prefix}sidebar-container--right#{$component-prefix}sidebar-container--pinned {
    @include media-breakpoint-up(xl) {
      #{$component-prefix}sidebar {
        right: 0;
        left: auto;
      }
    }
  }
}

/*
Body specific for open menues
*/
body {
  /*
  Fixed sidebars
  */
  &.has-pinned-sidebar-left {
    @include media-breakpoint-up(md) {
      padding-left: $sidebar-width-desktop;

      #{$component-prefix}compact-header {
        .js-toggle-open--toggle-pinned {
          display: none;
        }
      }
    }
  }

  &.pinned-sidebar-right {
    padding-right: $sidebar-width-desktop;

    #{$component-prefix}compact-header {
      padding-right: $sidebar-width-desktop;
    }
  }
}