open-nomad/ui/app/styles/components/boxed-section.scss

.boxed-section {
  margin-bottom: 1.5em;

  &:last-child {
    margin-bottom: 0;
  }

  .boxed-section-head,
  .boxed-section-foot {
    padding: 0.75em 1.5em;
    border: 1px solid $grey-blue;
    background: $white-ter;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;

    .pull-right {
      margin-left: auto;
    }

    &.is-compact {
      padding: 0.75em;
    }
  }

  .boxed-section-head {
    border-top-left-radius: $radius;
    border-top-right-radius: $radius;

    &.is-light {
      background: $white;
    }

    &.is-hollow {
      border-bottom: none;
      background: transparent;

      & + .boxed-section-body {
        border-top: none;
        padding-top: 0.75em;
      }
    }

    & + .boxed-section-body {
      padding: 1.5em;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }

  .boxed-section-body {
    padding: 0.75em 1.5em;
    background: $white;
    border: 1px solid $grey-blue;
    margin-top: -1px;
    border-radius: $radius;

    &.is-full-bleed {
      padding: 0;
      border: none;

      // Often components will have a DOM presence but no layout.
      // In that case, pass through.
      > *:first-child,
      > .ember-view:first-child > *:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }

    &.is-dark {
      background: $dark-2;
      border-color: lighten($dark, 30%);
      color: $white;
    }

    &.with-foot {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .boxed-section-foot {
    margin-top: -1px;
    border-bottom-left-radius: $radius;
    border-bottom-right-radius: $radius;
  }

  .boxed-section-row {
    width: 100%;
    display: flex;
    align-items: baseline;

    + .boxed-section-row {
      margin-top: 0.5em;
    }
  }

  &.is-small {
    font-size: $size-7;
  }

  @each $name, $pair in $colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      > .boxed-section-head {
        background: $color;
        border-color: $color;
        color: $color-invert;
      }

      > .boxed-section-body {
        border-color: $color;
      }

      > .boxed-section-foot {
        border-color: $color;
        background: lighten($color, 40%);
        color: $color;
      }
    }
  }
}