// ============================================================================
// :: Current
// ============================================================================
/**
 * Component used to display a list of colors. Each color is displayed in a grid
 * like fashion.
 */

// ============================================================================
// :: Settings
// ============================================================================
$item-spacing-mobile: 1rem;
$item-spacing-mobile-sides: $item-spacing-mobile * 2;

$item-spacing-desktop: 2rem;
$item-spacing-desktop-sides: $item-spacing-desktop * 2;

// ============================================================================
// :: Root
// ============================================================================
.bp-colors {
  position: relative;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-colors__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(100% + #{$item-spacing-mobile-sides});
  margin: -$item-spacing-mobile;
  padding: 0;

  list-style-type: none;

  @include respond-at($bp-breakpoint-desktop-base) {
    width: calc(100% + #{$item-spacing-desktop-sides});
    margin: -$item-spacing-desktop;
  }
}

.bp-colors__item {
  width: calc((100% / 2) - #{$item-spacing-mobile-sides});
  margin: $item-spacing-mobile;

  @include respond-at($bp-breakpoint-mobile-base) {
    width: calc((100% / 3) - #{$item-spacing-mobile-sides});
    margin: $item-spacing-mobile;
  }

  @include respond-at($bp-breakpoint-tablet-base) {
    width: calc((100% / 4) - #{$item-spacing-mobile-sides});
    margin: $item-spacing-mobile;
  }

  @include respond-at($bp-breakpoint-desktop-base) {
    width: calc((100% / 6) - #{$item-spacing-desktop-sides});
    margin: $item-spacing-desktop;
  }
}