lujanfernaud/prevy

//
// Box
//


.box {
  box-shadow: 0 1px .36px 0 $shadow;
  background: $white;
  border-top: 1px solid lighten($shadow, 34%);
  border-radius: $box-radius;
}

.box-image {
  border-bottom: 3px solid $indigo !important;
  padding-left: 0;
  padding-right: 0;

  @include media-breakpoint-up(md) {
    padding-right: 15px;
  }
}

.box-image--orientation-switch {
  border-top-left-radius: $box-radius !important;
  border-top-right-radius: $box-radius !important;

  @include media-breakpoint-up(md) {
    border-bottom-left-radius: $box-radius !important;
  }
}

.box-image__img {
  min-width: 100%;
}

.box-image__img--orientation-switch {
  border-top-left-radius: calc(#{$box-radius} - 1px);
  border-top-right-radius: calc(#{$box-radius} - 1px);

  @include media-breakpoint-up(md) {
    border-top-right-radius: 0;
    border-bottom-left-radius: calc(#{$box-radius} - 2px) !important;
  }
}

.box-title {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .35);

  @include media-breakpoint-up(sm) {
    font-size: 1.3rem;
  }
}

a.box-title:hover {
  color: #fff;
}

.box-text {
  padding: 1rem;

  @include media-breakpoint-up(md) {
    padding: 0.9rem 0.5rem;
  }

  @include media-breakpoint-up(lg) {
    padding: 1rem 0.5rem;
  }

  @include media-breakpoint-up(xl) {
    padding: .5rem .5rem .31rem .5rem;
  }
}

.box-text--orientation-switch {
  border-bottom-left-radius: calc(#{$box-radius} - 1px);
  border-bottom-right-radius: calc(#{$box-radius} - 1px);

  @include media-breakpoint-up(sm) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: calc(#{$box-radius} - 1px);
  }

  @include media-breakpoint-up(xl) {
    padding: 1rem .25rem .82rem .25rem;
  }
}

.box-text--accented {
  @include media-breakpoint-up(md) {
    border-bottom: 3px solid $indigo;
  }
}

.box--sidebar {
  margin-top: 1.75rem;
}