/* ==================================
   #SIDEBAR
   ================================== */

/* Variables
   ========================================================================== */

$au-sidebar-background: var(--au-gray-100) !default;
$au-sidebar-border: var(--au-gray-200) !default;
$au-sidebar-header-padding: $au-unit-small !default;
$au-sidebar-footer-padding: $au-unit !default;

/* Component
   ========================================================================== */

.au-c-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: $au-sidebar-background;
  border-bottom: 1px solid $au-sidebar-border;

  @include mq(medium) {
    height: 100%;
    border-bottom: 0;
    border-right: 1px solid $au-sidebar-border;
    overflow: auto;
  }

  @include mq(small) {
    overflow: hidden;
  }
}

.au-c-sidebar__header {
  padding: $au-sidebar-header-padding;

  @include mq(medium) {
    padding: $au-sidebar-header-padding * 1.5 $au-sidebar-header-padding * 1.5
      $au-sidebar-header-padding * 0.5;
  }
}

.au-c-sidebar__content {
  @include mq(small) {
    flex-grow: 2;
    overflow: auto;
  }
}

.au-c-sidebar__footer {
  @include au-font-size(var(--au-base));
  padding: $au-sidebar-footer-padding * 0.5;

  @include mq(medium) {
    text-align: center;
    padding: $au-sidebar-footer-padding;
  }

  @include mq(small) {
    &.au-c-sidebar__footer--border-top {
      border-top: 1px solid var(--au-gray-300);
    }
  }
}