@import "../../../sass/webpack_deps";

/// ----------------------------------------------------------------------------
/// Settings map
///
/// Settings are called via the `get` method, which is simply an alias for
/// Sass's `map-get` method.
///
/// @usage
/// `get($map-name, "setting-name")`
/// ----------------------------------------------------------------------------

$category-list: (
  "background-color": darken($color-white, 6),
  "margin-left": .4rem,
  "margin-top": .9rem
);





/// ----------------------------------------------------------------------------
/// Base
/// ----------------------------------------------------------------------------

.category-list {
  margin-left: -#{get($category-list, "margin-left")}; // Negative margin to offset first item's margin
  margin-top: -#{get($category-list, "margin-top")}; // Negative margin to offset first row of items' margin
}





/// ----------------------------------------------------------------------------
/// Modifiers
/// ----------------------------------------------------------------------------

// Used for when a category list is at the end of an `.article` and inside of
// the `.article-footer`
.category-list--article {
  @media (min-width: $min-720) {
    float: left;
    width: 43rem;
  }
}





/// ----------------------------------------------------------------------------
/// Elements
/// ----------------------------------------------------------------------------

// Each category in the list; it should be an `a`
.category-list__item {
  background-color: get($category-list, "background-color");
  border-radius: .4rem;
  color: lighten($color-black, 20); // #333
  display: inline-block;
  font-size: 1.2rem;
  line-height: 1;
  margin-left: get($category-list, "margin-left");
  margin-top: get($category-list, "margin-top");
  max-height: 3rem;
  padding: 1rem 1.2rem .8rem;
  transition: background-color $animation-speed ease;

  &:hover,
  &:active,
  &:focus {
    background-color: darken(get($category-list, "background-color"), 3);
  }
}