// New clean meta-sidebar

aside.metasidebar {
  grid-area: aside;
  position: relative;
  overflow: hidden;
}

.metasidebar.dark .metasidebar-wrapper {
  color: $gray-light;
  background-color: $black;
}

aside .metasidebar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 100%;
  width: $spacing;
  border-left: 1px solid $border-color;
}

aside .metasidebar-btn::after {
  content: "";
  display: inline-block;
  right: $spacing-xs;
  background-color: $primary;
  top: $spacing-xs;
  width: $spacing-xs;
  height: $icon;
  mask-image: url("@images/arrow-left.svg");
  mask-repeat: no-repeat;
}

aside .metasidebar-btn:hover {
  background-color: $link-hover-color;
  &:after {
    background-color: $white;
  }
} 

aside .metasidebar-wrapper[open] .metasidebar-btn {
  position: absolute;
  width: $spacing-md;
}

aside .metasidebar-wrapper[open] .metasidebar-btn::after {
  mask-image: url("@images/arrow-right.svg");
  mask-repeat: no-repeat;
}


aside .metasidebar-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  max-height: 100%;
  min-height: 0;
  background-color: $white;
}

aside .metasidebar-wrapper[open] {
  @include media-breakpoint-up(sm) {
    position: relative;
    display: grid;
    grid-template-columns: $meta-sidebar-width;
    top: auto;
  }
}

aside .metasidebar-content {
  position: relative;
  display: block;
  max-height: 100%;
  min-height: 0;
  margin-left: $spacing-md;
  padding-top: $spacing;
  padding-right: $spacing;
  padding-bottom: $spacing-xxl;
  padding-left: $spacing-xs;
  overflow-y: scroll;
  @include media-breakpoint-up(sm) {
    width: $meta-sidebar-width;
  }
}

.metasidebar-title {
  font-size: $h4-font-size;
  margin-bottom: $spacing-heading;
}

.metasidebar-subheading {
  font-size: $h5-font-size;
  margin-bottom: $spacing-xs;
}

.metasidebar .card-metasidebar {
  margin-bottom: $spacing;
  background-color: $gray-lightest;
}

.metasidebar.dark .card-metasidebar {
  background-color: $gray-darkest;
  border-color: $gray-darker;
}