/* -------------------------------- 

File#: _2_anim-cards
Title: Animated Cards
Descr: A collection of cards that slides over time
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --anim-cards-width: 280px;
  --anim-cards-gap: var(--space-md);
}

@supports (--css: variables) {
  @media (min-width: 48rem) {
    :root {
      --anim-cards-width: 400px;
    }
  }
  @media (min-width: 64rem) {
    :root {
      --anim-cards-width: 550px;
    }
  }
}
.anim-cards {
  overflow: hidden;
  margin-top: var(--anim-cards-gap);
  margin-bottom: var(--anim-cards-gap);
}

.anim-cards__list {
  display: flex;
  overflow: auto;
}

.anim-cards__item {
  float: left;
  width: var(--anim-cards-width);
  flex-shrink: 0;
  margin-right: var(--anim-cards-gap);
}

.anim-cards-control {
  display: inline-flex;
  width: 40px;
  height: 40px;
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.75);
  border-radius: 50%;
  transition: 0.2s;
}
.anim-cards-control i {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  color: var(--color-bg);
}
.anim-cards-control i::before, .anim-cards-control i::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: currentColor;
  transition: -webkit-clip-path 0.2s var(--ease-out);
  transition: clip-path 0.2s var(--ease-out);
  transition: clip-path 0.2s var(--ease-out), -webkit-clip-path 0.2s var(--ease-out);
}
.anim-cards-control i::before {
  -webkit-clip-path: polygon(1px 1px, 5px 1px, 5px calc(100% - 1px), 1px calc(100% - 1px));
          clip-path: polygon(1px 1px, 5px 1px, 5px calc(100% - 1px), 1px calc(100% - 1px));
}
.anim-cards-control i::after {
  -webkit-clip-path: polygon(calc(100% - 5px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
          clip-path: polygon(calc(100% - 5px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
}
.anim-cards-control:hover {
  cursor: pointer;
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.95);
}
.anim-cards-control[aria-pressed=true] i::before {
  -webkit-clip-path: polygon(2px 0%, 100% 50%, 100% 50%, 2px 100%);
          clip-path: polygon(2px 0%, 100% 50%, 100% 50%, 2px 100%);
}
.anim-cards-control[aria-pressed=true] i::after {
  -webkit-clip-path: polygon(calc(100% - 5px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
          clip-path: polygon(calc(100% - 5px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 5px) calc(100% - 1px));
}

.anim-cards:not(.anim-cards--anim-off) .anim-cards__list {
  overflow: visible;
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.anim-cards--reverse:not(.anim-cards--anim-off) .anim-cards__list {
  flex-direction: row-reverse;
}