$featured-browse-category-border-color: $border-color;
$featured-browse-category-caption-color: $white;

// These are the widths of the main content area at each viewport width
$container-sm: 510px; // (Bootstrap 4 "sm")
$container-md: 690px; // (Bootstrap 4 "md")
$container-lg: 930px; // (Bootstrap 4 "lg")
$container-xl: 1100px; // (Bootstrap 4 "xl")
$container-xl-sidebar: 825px; // ("xl" main content area when sidebar present)

// The aspect ratio factor determines the height of the tile.
// Can use different values because images are background images
// and will fit the container without distortion.
$aspect-ratio-factor-4x3: 0.75; // 4:3 width:height
$aspect-ratio-factor-1x1: 1; // 1:1 width: height

// Horizontal space between tiles
$tile-margin: 16px;

// Limits size of tile in cases where calculations create unreasonably large tile
$maximum-tile-width: 290px;

// `xs` viewport width; always display one full-width tile, wrapping others
$xs-one-tile-width: $maximum-tile-width;

// `sm` viewport width
$sm-one-tile-width: $xs-one-tile-width;
$sm-two-tile-width: ($container-sm * 0.5) - $tile-margin;
$sm-three-tile-width: ($container-sm * 0.3333333333333333) - $tile-margin;

// `md` viewport width
$md-one-tile-width: $xs-one-tile-width;
$md-two-tile-width: ($container-md * 0.5) - $tile-margin;
$md-three-tile-width: ($container-md * 0.3333333333333333) - $tile-margin;

// `lg` viewport width
$lg-one-tile-width: $xs-one-tile-width;
$lg-two-tile-width: ($container-lg * 0.5) - $tile-margin;
$lg-three-tile-width: ($container-lg * 0.3333333333333333) - $tile-margin;
$lg-four-tile-width: ($container-lg * 0.25) - $tile-margin;
$lg-five-tile-width: ($container-lg * 0.2) - $tile-margin;

// `xl` viewport width
$xl-one-tile-width: $xs-one-tile-width;
$xl-two-tile-width: ($container-xl * 0.5) - $tile-margin;
$xl-three-tile-width: ($container-xl * 0.3333333333333333) - $tile-margin;
$xl-four-tile-width: ($container-xl * 0.25) - $tile-margin;
$xl-five-tile-width: ($container-xl * 0.2) - $tile-margin;

// `xl` with sidebar viewport width
$xl-sidebar-three-tile-width: ($container-xl-sidebar * 0.3333333333333333) - $tile-margin;
$xl-sidebar-four-tile-width: ($container-xl-sidebar * 0.25) - $tile-margin;
$xl-sidebar-five-tile-width: ($container-xl-sidebar * 0.2) - $tile-margin;

.browse-category {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid $featured-browse-category-border-color;
  border-radius: $border-radius-lg;
  position: relative;

  .category-caption {
    bottom: 0px;
    color: $featured-browse-category-caption-color;
    position: absolute;
    text-align: center;
    height: 100%;
    width: 100%;
    padding: 5%;
    background: linear-gradient(0deg, rgba(46, 45, 41, 0.7) 45%, rgba(46, 45, 41, 0) 100%);
    border-radius: $border-radius-lg;
    display: flex;
    flex-direction: column; 
    justify-content: flex-end;
  
    &:hover {
      background: linear-gradient(rgba(46, 45, 41, 0.7), 0%, rgba(46, 45, 41, 0.7) 100%); 
    }
  }

  .category-title {
    font-size: $h4-font-size;
    line-height: 1.2;
    text-align: center;
    margin: 0;
    padding: $spacer * 0.25;

    @media (min-width: breakpoint-min("sm")) {
      font-size: 1.125rem;
    }

    @media (min-width: breakpoint-min("md")) {
      font-size: $h5-font-size;
    }

    @media (min-width: breakpoint-min("lg")) {
      font-size: $h4-font-size;
    }
  }

  .category-subtitle {
    display: block;
  }

  .item-count {
    font-size: $font-size-base;
    text-transform: uppercase;

    @media (min-width: breakpoint-min("sm")) and (max-width: breakpoint-min("lg")) {
      font-size: $font-size-sm;
    }
  }
}

.spotlight-flexbox.browse-categories {
  justify-content: space-around;

  .box {
    flex: none;
    margin-bottom: 1rem;
    min-width: 150px;
    padding: 0;
  }
}

// Most tile sizing works regardless of sidebar or not, because
// only "lg" and "xl" have a sidebar, and "lg" with a sidebar
// is the same width as "md" without a sidebar.
[data-sidebar="false"],
[data-sidebar="true"] {
  &.categories-1, &.categories-2, &.categories-3,
  &.categories-4, &.categories-5 {
    .browse-category {
      max-width: $maximum-tile-width;
      max-height: $maximum-tile-width * $aspect-ratio-factor-4x3;
      width: $xs-one-tile-width;
      height: $xs-one-tile-width * $aspect-ratio-factor-4x3;
    }
  }
  &.categories-2 {
    .browse-category {
      @media (min-width: breakpoint-min("sm")) {
        width: $sm-two-tile-width;
        height: $sm-two-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("md")) {
        width: $md-two-tile-width;
        height: $md-two-tile-width * $aspect-ratio-factor-4x3;
      }
    }
  }
  &.categories-3 {
    .browse-category {
      @media (min-width: breakpoint-min("sm")) {
        width: $sm-three-tile-width;
        height: $sm-three-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("md")) {
        width: $md-three-tile-width;
        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("lg")) {
        width: $lg-three-tile-width;
        height: $lg-three-tile-width * $aspect-ratio-factor-4x3;
      }
    }
  }
  &.categories-4 {
    .browse-category {
      @media (min-width: breakpoint-min("sm")) {
        width: $sm-two-tile-width;
        height: $sm-two-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("md")) {
        width: $md-two-tile-width;
        height: $md-two-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("lg")) {
        width: $lg-four-tile-width;
        height: $lg-four-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("xl")) {
        width: $xl-four-tile-width;
        height: $xl-four-tile-width * $aspect-ratio-factor-4x3;
      }
    }
  }
  &.categories-5 {
    .browse-category {
      @media (min-width: breakpoint-min("sm")) {
        width: $sm-three-tile-width;
        height: $sm-three-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("md")) {
        width: $md-three-tile-width;
        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("lg")) {
        width: $lg-five-tile-width;
        height: $lg-five-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("xl")) {
        width: $xl-five-tile-width;
        height: $xl-five-tile-width * $aspect-ratio-factor-4x3;
      }
    }
  }
}

[data-sidebar="true"] {
  // Font size smaller at "lg" breakpoint only when there is a sidebar
  .browse-category {
    .category-title {
      @media (min-width: breakpoint-min("lg")) and (max-width: breakpoint-min("xl")) {
        font-size: $h5-font-size;
      }
    }

    .item-count {
      @media (min-width: breakpoint-min("lg")) and (max-width: breakpoint-min("xl")) {
        font-size: $font-size-sm;
      }
    }
  }
}

// Special cases where the sizing above doesn't work when there is a sidebar.
// Note that "lg" with a sidebar has the same available width as "md"
// without a sidebar.
[data-sidebar="true"] {
  &.categories-3 {
    .browse-category {
      @media (min-width: breakpoint-min("lg")) {
        width: $md-three-tile-width;
        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("xl")) {
        width: $xl-sidebar-three-tile-width;
        height: $xl-sidebar-three-tile-width * $aspect-ratio-factor-4x3;
      }
    }
  }
  &.categories-4 {
    .browse-category {
      @media (min-width: breakpoint-min("lg")) {
        width: $md-two-tile-width;
        height: $md-two-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("xl")) {
        width: $xl-sidebar-four-tile-width;
        height: $xl-sidebar-four-tile-width * $aspect-ratio-factor-4x3;
      }
    }
  }
  &.categories-5 {
    .browse-category {
      @media (min-width: breakpoint-min("lg")) {
        width: $md-three-tile-width;
        height: $md-three-tile-width * $aspect-ratio-factor-4x3;
      }

      @media (min-width: breakpoint-min("xl")) {
        width: $xl-sidebar-five-tile-width;
        height: $xl-sidebar-five-tile-width * $aspect-ratio-factor-4x3;
      }
    }
  }
}