// Box
//
// A simple box styling.
//
// Markup: box.hbs
//
// :hover  - Hover styling.
//
// Style guide: components.box

// Icon box
//
// Markup: box--icon.hbs
//
// Style guide: components.box.box--icon

// Icon box - with hover
//
// Markup: box--icon-with-hover.hbs
//
// Style guide: components.box.box--icon-with-hover.hbs

// Icon box - with border
//
// Markup: box--icon-with-border.hbs
//
// Style guide: components.box.box--icon-with-border.hbs



.box,
%box {
  padding: 10px;

  @include respond-to('small') {
    padding: 20px;
  }

  &__title {
    margin-bottom: 4px;
    margin-top: 0;
  }

  &--with-border {
    border: 2px solid color(border);
  }

  &--with-hover {
    &:hover,
    &:focus {
      background-color: color(border);
    }
  }



  &--icon {
    @extend %box;
    padding: 20px 0;

    &--reduced-top-spacing {
      padding-top: 2px;

    }

    &__left {
      float: left;
      text-align: center;
      padding: 2px 0;
      width: 85px;

      i {
        font-size: 40px;
      }
    }

    &__right {
      padding-left: 85px;
    }
  }
}

.pane-bean-current-news {
  .box--icon {
    &:first-child {
      @extend %box--icon--reduced-top-spacing;
    }
  }
}

