/* Component - Price
=================================== */
.price-regular-preorder {
  display: flex;
  align-items: center;
  grid-gap: 1rem;
}

.price-on-sale {
  & .price-regular {
    display: none;
  }
}

.card {
  & .price-regular .badge-sale {
    display: none;
  }
}

.price-item {
  margin: 0;

  & > span {
    font-size: calc(var(--font-body-scale) * 1.4rem);
  }

  & .sup {
    display: block;
    top: 0;
    line-height: normal;
    font-size: calc(var(--font-body-scale) * 1.2rem);
    font-weight: 400;
    position: relative;
    vertical-align: baseline;

    @media (min-width: 1200px) {
      display: inline-block;
    }
  }
}

.product-page {
  & .price-item > span {
    font-size: calc(var(--font-product-price-scale) * 1.4rem);
  }

  & .price-item .sup {
    font-size: calc(var(--font-product-price-scale) * 1.2rem);
  }

  & .price-sale s {
    font-size: calc(var(--font-product-price-scale) * 1.3rem);
  }

  & .price-requires-login-message {
    font-size: calc(var(--font-body-scale) * 1.4rem);
  }
}

.product-info {
  & .price-item .sup {
    display: inline-block;
  }

  & .price-regular .price-item-regular,
  & .price-item-sale {
    font-size: calc(var(--font-product-price-scale) * 2.4rem);
  }

  & .price-discount {
    display: flex;
    align-items: center;
    line-height: normal;
    margin-bottom: 0.5rem;
  }
}

.price-regular .price-item-regular,
.price-item-sale {
  font-weight: var(--font-bolder-weight);
  display: block;
  color: rgb(var(--color-price));
  font-size: calc(var(--font-body-scale) * 1.8rem);
  line-height: 1;
}

.price-sale {
  & s {
    text-decoration: none;
    position: relative;
    display: inline-block;
    font-size: calc(var(--font-body-scale) * 1.3rem);
    color: rgb(var(--color-price-discounted));
    margin-bottom: 0.5rem;

    @media (min-width: 1200px) {
      margin-bottom: 0;
    }

    &::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      width: 100%;
      height: 1px;
      border-top: 1px solid currentColor;
      opacity: 0.6;
      transform: rotate(-10deg);
    }
  }

  & .price-item-sale {
    color: rgba(var(--color-price-discounted-final));
  }
}

[class*="color-accent"] {
  & .product-page .price-regular .price-item-regular,
  & .product-page .price-item-sale,
  & .product-page .price-item .sup,
  & .product-page .price-sale s {
    color: rgb(var(--color-foreground));
  }
}

.price-requires-login-message {
  font-size: calc(var(--font-body-scale) * 1.3rem);
  color: var(--color-price-discounted);
  margin: 0;

  & a {
    text-decoration: underline;
  }
}