@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tokens/space";
@use "../../../styles/tokens/color";
@use "../../../styles/tools/convert";
@use "./config";

@mixin root {
  display: flex;
  flex-wrap: wrap;
  gap: space.get("small");
  margin-bottom: space.get("large");
}

@mixin unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: space.get("xsmall");
  perspective: convert.to-rem(300px);
  perspective-origin: center center;
  transform: translateZ(0);
}

@mixin card {
  position: relative;
  width: config.$unit-width;
  height: config.$unit-height;
  overflow: visible;
  border-radius: config.$unit-radius;
}

@mixin layer {
  position: relative;
  display: block;
  width: config.$unit-width;
  height: config.$unit-half-height;
  overflow: hidden;
  background-color: var(--color-surface-secondary);
  color: color.$white;
  backface-visibility: hidden;
}

@mixin flipped-unit {
  .countdown__leaf-front {
    transform: rotateX(-90deg) translateZ(0);
    transition:
      transform 0.2s ease-in,
      background-color 0.2s ease-in,
      color 0.2s ease-in;
    transition-delay: 0s;
    background-color: var(--color-surface-moderate);
  }

  .countdown__leaf-back {
    transform: rotateX(0deg) translateZ(0);
    transition:
      transform 0.2s ease-in,
      background-color 0.2s ease-in,
      color 0.2s ease-in;
    transition-delay: 0.2s;
  }

  .countdown__bottom::before {
    transition: height 0.2s ease-in-out;
    transition-delay: 0.15s;
    height: 100%;
  }
}

@mixin top-half {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;

  span {
    top: 0;
  }
}

@mixin bottom-half {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;

  span {
    bottom: 0;
  }
}

@mixin animated-half {
  position: absolute;
  left: 0;
  width: calc(100% - 0.5px);
  z-index: 10;
  transform-style: preserve-3d;
}

@mixin leaf-front {
  top: 0;
  transform-origin: bottom center;
  transform: rotateX(0deg) translateZ(0);
  transition-delay: 0.2s;
}

@mixin leaf-back {
  top: config.$unit-half-height;
  transform-origin: top center;
  transform: rotateX(90deg) translateZ(0);
  transition-delay: 0s;
}

@mixin bottom-shadow {
  &::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    filter: blur(10px);
  }
}

@mixin value-position {
  position: absolute;
  left: 50%;
  width: 100%;
  height: config.$unit-height;
  text-align: center;
  transform: translateX(-50%);
}

@mixin value {
  display: block;
  font-size: convert.to-rem(32px);
  font-weight: 700;
  line-height: config.$unit-height;
  letter-spacing: convert.to-rem(-0.6px);
}

@mixin label {
  display: block;
  text-align: center;
  font-size: convert.to-rem(18px);
  line-height: convert.to-rem(26px);
  color: var(--color-text-default);
}

@mixin tag-root {
  display: flex;
  align-items: center;
  gap: config.$tag-gap;
  width: fit-content;
  max-width: 100%;
  min-height: config.$tag-min-height;
  padding: config.$tag-padding-y config.$tag-padding-x;
  border-radius: 9999px;
  background-color: var(--tag-black);
  color: var(--tag-text-light);
  margin-bottom: space.get("large");
}

@mixin tag-part {
  display: inline-flex;
  align-items: baseline;
  gap: config.$tag-part-gap;
}

@mixin tag-value {
  font-size: config.$tag-value-font-size;
  line-height: config.$tag-value-line-height;
  font-weight: 700;
  letter-spacing: config.$tag-value-letter-spacing;
}

@mixin tag-label {
  font-size: config.$tag-label-font-size;
  line-height: config.$tag-label-line-height;
  font-weight: 700;
  color: var(--color-text-disabled);
}

@mixin tag-separator {
  font-size: config.$tag-value-font-size;
  line-height: config.$tag-value-line-height;
  font-weight: 700;
  color: var(--color-text-disabled);
  transform: translateY(config.$tag-separator-offset-y);
}