//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use "../../config" as *;
@use "../../breakpoint" as *;
@use "../../theme" as *;
@use "../../utilities/component-reset" as *;
@use "../../utilities/convert" as *;

@mixin sidebar-content {
  .#{$prefix}--sidebar-content__container {
    display: flex;
    flex: 1;
    flex-shrink: 1;
    overflow: hidden;
    height: 100%;
  }

  .#{$prefix}--sidebar-content__header {
    padding: 1em;
    background-color: $layer-primary;
    border-bottom: 1px solid $border-strong;
    &.#{$prefix}--sidebar-content__header--no-padding {
      padding: 0;
    }
  }

  .#{$prefix}--sidebar-content__children {
    background-color: $background-main;
    flex: 1;
    overflow: auto;
  }

  .#{$prefix}--sidebar-content__scroll {
    overflow: auto;
    flex: 1;
  }

  .#{$prefix}--sidebar-item-content {
    width: 100%;
    @media print {
      display: none;
    }
    @include breakpoint("lg") {
      width: 30%;
      min-width: 20rem;
      max-width: 30rem;
      border-right: 1px solid $border-strong;
    }
    @include breakpoint("lg") {
      //min-width: auto;
      max-width: 30rem;
    }
    display: flex;
    flex-direction: column;
    height: 100%;

    @include breakpoint-down("lg") {
      top: 0;
      overflow: auto;
    }
  }
  .#{$prefix}--content-section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    //height: 100vh;
    flex: 1;
    @include breakpoint-down("lg") {
      .#{$prefix}--sidebar-content__container--active & {
        transform: translateX(0%);
      }
      transform: translateX(100%);
      position: fixed;
      top: 0;
      background: $background-main;
      width: 100%;
      height: 100%;
      overflow: auto;
      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      z-index: 100;
    }
  }
  .#{$prefix}--sidebar-content-mobile-header {
    display: none;
    @include breakpoint-down("lg") {
      display: block;
      padding: 1em;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: $background-main;
      border-bottom: 1px solid $layer-primary;
      z-index: 10000;
      width: 100%;
      position: sticky;
      top: 0;
    }
  }

  .#{$prefix}--sidebar-content__back-button {
    font-weight: 500;
    color: $action-default-fill-primary-default;
    cursor: pointer;
    display: inline-block;
    text-decoration: none i !important;
    svg {
      margin-right: 0.3em;
      path {
        fill: $action-default-fill-primary-default;
      }
    }
  }
}