@import "pack/seed-family/_index";
@import "../configs/color";

.c-SidebarCollapsibleCard {
  @import "../resets/base";
  $br: 3px;
  $bx-sdw: _color(grey, 400);
  $offset: 16px;
  $padding: 12px;
  background-color: transparent;
  border-radius: $br;
  box-shadow: 0 0 0 rgba($bx-sdw, 0);
  margin-bottom: 4px;
  transition: box-shadow 0.2s ease;

  &__header {
    border-radius: $br;
    color: _color(text);
    cursor: pointer;
    display: block;
    min-height: 40px;
    padding: $padding $padding $padding $offset;
    text-decoration: none;

    &:hover {
      background-color: _color(grey, 200);
    }
  }

  &__title {
    margin: 0;
  }

  &__body {
    background-color: _color(grey, 200);
    border-bottom-left-radius: $br;
    border-bottom-right-radius: $br;
  }

  &__content {
    color: _color(charcoal, 300);
    padding: ceil($offset / 4) $offset $offset;
  }

  &__drag-handle {
    color: _color(text, muted);
    margin: (-($padding)) (-(ceil($padding / 2))) (-($padding)) (-($padding));
    padding: $padding ceil($padding / 2) $padding $padding;
    @include parent(".is-sorting") {
      color: _color(text);
    }
  }

  // Modifiers
  &.is-open {
    background-color: _color(grey, 200);
    box-shadow: 0 1px 2px $bx-sdw;
  }

  @include parent(".is-sorting") {
    background-color: white;
    box-shadow: 0 0 0 1px _color(grey, 500), 0 2px 4px $bx-sdw;
  }
}