// Metasidebar

.content-with-meta {
  &.standard-meta-header {
    padding-top: 70px;
  }

  &.extended-meta-header {
    padding-top: 252px;
  }

  transition: all .25s ease-out;
  padding-right: 0;

  &.right-offset {
    padding-right: $spacing;
  }

  @include media-breakpoint-up(xs) {
    padding-right: $meta-sidebar-width + $spacing-sm;
  }

  @include media-breakpoint-up(md) {
    padding-right: $meta-sidebar-width;
    &.right-offset {
      padding-right: 0;
    }
  }

  @include media-breakpoint-up(lg) {
    padding-right: $meta-sidebar-lg-width;
    &.right-offset {
      padding-right: $spacing-sm;
    }
  }

}

.meta-fold {
  display: flex;
  justify-content: center;
  align-items: center;
  @include io-icomoon('arrow-right');
  transition: all .25s ease-out;
  z-index: $zindex-meta-sidebar;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: $spacing-sm * -1;
  width: $spacing-sm;
  height: 100%;
  padding-bottom: $actionbar-height;
  border-left: $border-width solid $meta-fold-border-color;
  background-color: $meta-fold-background-color;
  color: $meta-fold-sidebar-color;
  text-align: center;
  font-size: $font-size-icon-xs;

  @include hover-focus {
    background-color: $link-hover-color;
    color: $white;
  }

  &.right-offset {
    left: $spacing * -1;
    width: $spacing;
    transition: all .25s ease-out;
    @include io-icomoon('arrow-left');
  }

  @include media-breakpoint-up(lg) {
    right: $meta-sidebar-lg-width;
  }

  @include media-breakpoint-down(xs) {
    width: $spacing;
    left: 0;
  }

}

.meta-sidebar {
  &.standard-meta-header {
    padding-top: 70px;
  }

  &.extended-meta-header {
    padding-top: 252px;
  }

  position: fixed;
  display: block;
  top: $navbar-header-height;
  width: $meta-sidebar-width;
  right: 0px;
  z-index: $zindex-meta-sidebar;
  background-color: $meta-sidebar-bg;
  color: $meta-sidebar-content-color;
  height: 100%;

  .heading,
  .meta-label,
  h1,
  h2,
  h3,
  h4,
  h5 {
    color: $meta-sidebar-label-color;
  }

  .link {
    color: $meta-sidebar-link-color;

    @include hover-focus {
     color: $meta-sidebar-hover-link-color;
    }
  }

  @include media-breakpoint-down(xs) {
    width: 100%;
  }


  .meta-content {
    padding-left: $spacing;
    padding-right: $spacing;
    padding-top: $spacing;
    padding-bottom: $actionbar-height + $spacing;

    .table {
      color: $meta-sidebar-content-color;

      thead {
        td, th {
          font-size: $font-size-label;
          font-weight: normal;
           border-bottom: $table-border-width solid $meta-sidebar-table-border-color;
        }
      }

      td, th {
        border: $table-border-width solid $meta-sidebar-table-border-color;
      }
    }

    .download > .btn {
      color: $meta-sidebar-content-color;
    }
  }

  .form-control {
    background-color: $meta-sidebar-bg;
    border-color: $petrol;
    color: $meta-sidebar-content-color;
  }

  transition: all 0.25s ease-out;
  &.right-offset {
    right: - $meta-sidebar-width;
    transition: all 0.25s ease-out;
  }

  @include media-breakpoint-up(lg) {
    width: $meta-sidebar-lg-width;

    &.right-offset {
      right: - $meta-sidebar-lg-width;
    }
  }

  @include media-breakpoint-down(xs) {
    width: 100%;
    padding-left: $spacing;

    &.right-offset {
      right: -100%;
    }
  }

}