
//
// 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%);
  }

  &--alt {
    padding: @vertical-rhythm*2 0;
  }

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

  &__caption {
    .font-normalize(16px, 0);
    font-weight: bold;
    text-transform: uppercase;
    color: @box-caption-color;
    position: relative;
  }

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

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

  &__special-header {
    border-left: 4px solid @brand-primary;
    padding-left: 20px;
    margin-bottom: 30px;

    h3 {
      margin: 0;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: bold;
    }

    p {
      margin: 0;
    }

    .btn {
      float: right;
    }
  }
}



//
// 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: -12px;
  font-size: 20px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-decoration: none;
  text-align: center;
  color: fade(@text-color, 30%);

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

  &:hover,
  &:focus {
    text-decoration: none;
    color: fade(@text-color, 50%);
  }
}



//
// Tabs for listings
// --------------------------------------------------

.dir-tabs() {
  background: #fff;

  .nav-tabs {
    background: #f9f9f9;
    border: 0 none;

    > li {
      margin: 0;

      > a {
        font-size: 14px;
        text-transform: uppercase;
        color: @text-color;
        padding: 12px 24px;
        font-weight: bold;
        margin-right: 0;
        border-radius: 0;
        border: 0 none;
        border-top: 2px solid #f9f9f9;

        > .fa {
          color: fade(@text-color, 30%);
          display: inline-block;
          margin-right: 6px;
        }

        &:hover,
        &:focus {
          border: 0 none;
          border-top: 2px solid #ddd;
          background: #f0f0f0;
        }

        @media (max-width: @grid-float-breakpoint) {
          font-size: 12px;
          padding: 10px 16px;

          > .fa {
            margin-right: 3px;
          }
        }
      }

      &.active > a,
      &.active > a:hover,
      &.active > a:focus {
        border-top-color: @brand-dark;
        background: #fff;
      }

      > span {
        padding: 12px 24px;

        @media (max-width: @grid-float-breakpoint) {
          font-size: 12px;
          padding: 10px 16px;
        }
      }
    }
  }

  .tab-content {
    border: 0 none !important;
  }
}

.tabbable {
  .dir-tabs();
}

.members-tabs {

  .alert {
    margin-bottom: 0;
  }

  .dir-tabs();

  .tab-pane {
    padding: 20px;
  }

  .letters {
    border-bottom: 1px solid @border-color;
    margin: 0 -20px 0;
    padding: 0 20px 20px;
  }

  .ia-items {
    padding: 0 20px 20px;
  }
}



//
// Special styles for boxes
// --------------------------------------------------

.dir-featured,
.box--featured {
  .box__caption {
    color: @brand-info;
  }

  .card__actions a {
    background:  @brand-info;

    &:hover {
      background: darken(@brand-info, 10%);
    }
  }
}

.dir-sponsored,
.box--sponsored {
  .box__caption {
    color: @brand-warning;
  }

  .card__actions a {
    background:  @brand-warning;

    &:hover {
      background: darken(@brand-warning, 10%);
    }
  }
}