$subsections-gutter: $grid-gutter-width !default;

// @import "@css[shared]/page/category/_subsections";
// @mixin subsection-hover {}, @mixin subsection-title {}

.subsections {
   display: flex;
   flex-wrap: wrap;
   padding-bottom: $grid-gutter-width;

   @if $subsections-gutter != $grid-gutter-width {
      margin-right: calc(-1 * $subsections-gutter / 2);
      margin-left: calc(-1 * $subsections-gutter / 2);
   }
}

.subsection-item {
   margin-bottom: $subsections-gutter;

   @if $subsections-gutter != $grid-gutter-width {
      padding-right: calc($subsections-gutter / 2);
      padding-left: calc($subsections-gutter / 2);
   }
}

.subsection-item-inner {
   @include underline-never;

   border: 1px solid $border-color;
   display: flex;
   align-items: center;
   height: 100%;
   transition: box-shadow $transition-speed;

   &:hover {
      @if mixin-exists(subsection-hover) {
         @include subsection-hover;
      } @else {
         box-shadow: 0 6px 11px 1px rgba(36, 40, 43, .1);
      }
   }
}

.subsection-item-image {
   border-right: 1px solid $border-color;
   padding: 5px;
}

.subsection-item-title {
   @if mixin-exists(subsection-title) {
      @include subsection-title;
   } @else {
      color: $text-dark;
      font-weight: $font-weight-bold;
      letter-spacing: $letter-spacing-lg;
      line-height: $line-height-sm;
      padding: 0 $grid-gutter-width;
      text-transform: uppercase;
   }
}
