/*
 * Panels
 * A generic block container
 */

@mixin panel-base {
  background-color: $color-white;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-left: 0;
  border-right: 0;
}

@mixin panel-theme-default {
  border-top-color: $color-black;
  border-bottom-color: $color-gray-light;
}

@mixin panel-margin {
  margin: $spacing-large 0;

  @include media($medium-screen) {
    margin-bottom: $site-margins * 8;
  }
}

@mixin panel-row {
  @include grid-row;

  .col {
    margin: 0 ($site-margins-mobile * 2);

    @include media($medium-screen) {
      margin: 0 ($site-margins * 2);
    }
  }
}

@mixin panel-actions {
  padding: $gap;
}

@mixin shadow-panel {
  box-shadow: $box-shadow;
  border-top: none;
  border-bottom: none;
}

.panel {
  @include panel-base;
  @include panel-theme-default;
  @include panel-margin;
  @include shadow-panel;
  max-width: $max-panel-width;

  &__content {
    padding: 3.2rem 2.4rem;
  }

  &__body {
    margin-right: $gap * 2;
  }

  &__heading {
    padding: 3.2rem 2.4rem;

    @include media($medium-screen) {
      padding: $gap * 4;
    }

    &--tight {
      padding: $gap * 2;
    }

    &--divider {
      border-bottom: 1px solid $color-gray-light;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin: 0;
      display: inline-block;

      .subtitle {
        color: $color-gray;
      }
    }

    .icon-tooltip {
      margin-left: $gap * 2;
    }

    &--grow {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }

  &__footer {
    padding: 3 * $gap;
  }
}