
//
// Boxes / blocks
// --------------------------------------------------

.box {

  // &--border {
  //   padding: 20px;
  //   border: 1px solid @border-color;
  // }

  // &--featured {
  //   border: 1px solid @brand-info;
  //   padding: @gap;
  //   background: fade(@brand-info, 10%);
  // }

  // &--sponsored {
  //   border: 1px solid @brand-warning;
  //   padding: @gap;
  //   background: fade(@brand-warning, 10%);
  // }

  &--bg {
    background: #fff;
    padding: 30px;

    .box__caption {
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 15px;

      span {
          padding-left: 15px;
          background: #fff;
      }
    }
  }

  + .box,
  + div {
    margin-top: @vertical-rhythm*2;
  }

  &__caption {
    .font-normalize(18px, 0);
    color: @box-caption-color;
    position: relative;

    span {
      display: inline-block;
      background: @body-bg;
      padding-right: 15px;
      position: relative;
      z-index: 10;
    }

    &::before {
      display: block;
      content: '';
      height: 1px;
      background: fade(@brand-dark, 10%);
      position: absolute;
      left: 0;
      right: 0;
      top: 9px;
      // .translate(0,-50%);
    }
  }

  &__content {
    color: @box-content-color;
    padding-top: @vertical-rhythm/2;

    > *:last-child {
      margin-bottom: 0;
    }
  }
}



//
// Min max toggle
// --------------------------------------------------

.collapsible {
  position: relative;

  &.collapsed {

    .minmax-toggle i {
      .fa-icon();
      &:before { content: @fa-var-angle-down; }
    }

    .box__content,
    > .fieldset__content {
      display: none;
    }
  }
}

.minmax-toggle {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -15px;
  font-size: 20px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  text-align: center;
  color: @brand-accent;
  background: @body-bg;

  i {
    .fa-icon();
    &:before { content: @fa-var-angle-up; }
  }

  &:hover,
  &:focus {
    text-decoration: none;
    color: @brand-accent;
  }
}