@layer components {
  /* The product page's Prishistorikk section */

  .price-history {
    padding: var(--block-space);
    border-radius: 1.5rem;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);

    .price-chart {
      --price-chart-height: 300px;

      @media (width < 640px) {
        --price-chart-height: 220px;
      }
    }
  }

  .price-history__header {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    margin-block-end: var(--block-space);

    @media (width >= 600px) {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .price-history__title {
    font-size: var(--text-2xl);
    font-weight: 700;
  }

  .price-history__range-selector {
    display: flex;
    gap: var(--inline-space-half);
  }

  .price-history__range-btn {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    color: var(--color-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    padding-block: var(--block-space-quarter);
    padding-inline: var(--inline-space-half);
    text-decoration: none;
    transition: background-color 150ms, border-color 150ms, color 150ms;

    &:hover {
      border-color: var(--color-separator);
      background-color: var(--color-shade);
      color: var(--color-ink);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }
  }

  .price-history__range-btn--active {
    border-color: var(--color-primary);
    background-color: var(--color-positive-subtle);
    color: var(--color-primary);

    &:hover {
      border-color: var(--color-primary-hover);
      background-color: var(--color-positive-subtle);
      color: var(--color-primary-hover);
    }
  }

  .price-history__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    block-size: 300px;
    color: var(--color-muted);
    gap: var(--block-space-half);

    .material-symbols-outlined {
      color: var(--color-border);
      font-size: 3rem;
    }
  }

  /* Every price chart (price_chart_controller.js). Known prices are a solid
     line over a light fill; a dotted grey line bridges days without a known
     price; dots mark a lone known day, the lowest price and today's price.
     The limit is orange wherever it is shown. Where the chart sits sets its
     height. */

  .price-chart {
    --price-chart-gutter: 0rem;
  }

  .price-chart--axes {
    --price-chart-gutter: 3.4rem;
  }

  .price-chart__plot {
    position: relative;
    block-size: var(--price-chart-height, 5.5rem);
    margin-inline-start: var(--price-chart-gutter);

    .price-chart--axes & {
      border-block-end: var(--border);
      border-inline-start: var(--border);
    }

    svg {
      position: absolute;
      overflow: visible;
      block-size: 100%;
      inline-size: 100%;
      inset: 0;

      * {
        vector-effect: non-scaling-stroke;
      }
    }
  }

  .price-chart__grid {
    stroke: var(--color-border);
  }

  .price-chart__below {
    fill: oklch(var(--lch-orange-50));
  }

  .price-chart__fill {
    fill: oklch(var(--lch-green-600) / 9%);
  }

  .price-chart__typical {
    stroke: oklch(var(--lch-gray-300));
    stroke-dasharray: 4 4;
  }

  .price-chart__gap {
    fill: none;
    stroke: oklch(var(--lch-gray-400));
    stroke-dasharray: 0 5;
    stroke-linecap: round;
    stroke-width: 2;
  }

  .price-chart__line {
    fill: none;
    stroke: var(--color-primary);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .price-chart__target {
    stroke: oklch(var(--lch-orange-600));
    stroke-dasharray: 6 4;
    stroke-width: 2;
  }

  .price-chart__point {
    position: absolute;
    border-radius: 50%;
    background-color: var(--color-primary);
    block-size: 0.5rem;
    box-shadow: 0 0 0 2px var(--color-surface);
    inline-size: 0.5rem;
    pointer-events: none;
    translate: -50% -50%;
  }

  .price-chart__point--lowest {
    border: 2px solid var(--color-primary);
    background-color: var(--color-surface);
    block-size: 0.6rem;
    inline-size: 0.6rem;
  }

  .price-chart__point--today {
    block-size: 0.75rem;
    box-shadow: 0 0 0 2.5px var(--color-surface);
    inline-size: 0.75rem;
  }

  .price-chart__axis {
    position: absolute;
    color: var(--color-muted);
    font-size: 0.6875rem;
    inline-size: calc(var(--price-chart-gutter) - 0.4rem);
    inset-inline-start: calc(-1 * var(--price-chart-gutter));
    text-align: end;
    translate: 0 -50%;
    white-space: nowrap;
  }

  .price-chart__dates {
    position: relative;
    block-size: 1.4rem;
    color: var(--color-muted);
    font-size: 0.6875rem;
    margin-inline-start: var(--price-chart-gutter);
  }

  .price-chart__date {
    position: absolute;
    inset-block-start: 0.3rem;
    translate: -50% 0;
    white-space: nowrap;
  }

  .price-chart__date--minor {
    @media (width < 640px) {
      display: none;
    }
  }

  .price-chart__date--start {
    translate: 0 0;
  }

  .price-chart__date--end {
    translate: -100% 0;
  }

  .price-chart__tag {
    position: absolute;
    padding: 0.1em 0.45em;
    border-radius: 0.3rem;
    background-color: var(--color-surface);
    font-size: 0.6875rem;
    font-weight: 600;
    pointer-events: none;
    translate: 0 -50%;
    white-space: nowrap;

    &[data-lane="left"] {
      inset-inline-start: 0.4rem;
    }

    &[data-lane="right"] {
      inset-inline-end: 0.25rem;
    }
  }

  .price-chart__tag--typical {
    box-shadow: 0 0 0 1px var(--color-border);
    color: var(--color-tag);
  }

  .price-chart__tag--today {
    box-shadow: 0 0 0 1px oklch(var(--lch-green-100));
    color: var(--color-primary-hover);
  }

  .price-chart__tag--lowest {
    box-shadow: 0 0 0 1px var(--color-border);
  }

  .price-chart__tag--target {
    background-color: oklch(var(--lch-orange-600));
    color: var(--color-ink-inverted);
  }

  .price-chart__pin {
    position: absolute;
    background-color: var(--color-separator);
    inline-size: 1px;
    inset-block: -1.6rem 0;

    .material-icons {
      position: absolute;
      display: grid;
      border-radius: 50%;
      background-color: var(--color-surface);
      block-size: 1.35rem;
      box-shadow: 0 0 0 1.5px oklch(var(--lch-green-800));
      color: oklch(var(--lch-green-800));
      font-size: 0.85rem;
      inline-size: 1.35rem;
      inset-block-start: 0;
      inset-inline-start: 50%;
      place-items: center;
      translate: -50% 0;
    }
  }

  .price-chart__hover {
    position: absolute;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    background-color: var(--color-surface);
    block-size: 0.7rem;
    inline-size: 0.7rem;
    pointer-events: none;
    translate: -50% -50%;
  }

  .price-chart__tooltip {
    position: absolute;
    z-index: 10;
    padding: var(--block-space-half) var(--inline-space);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-soft);
    min-inline-size: 120px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease-out;
    white-space: nowrap;
  }

  .price-chart__tooltip--shown {
    opacity: 1;
  }

  .price-chart__tooltip-price {
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: 700;
    margin-block-end: var(--block-space-quarter);
  }

  .price-chart__tooltip-missing {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-block-end: var(--block-space-quarter);
  }

  .price-chart__tooltip-store {
    display: flex;
    align-items: center;
    color: var(--color-ink);
    font-size: var(--text-sm);
    gap: var(--inline-space-half);
    margin-block-end: var(--block-space-quarter);

    .material-symbols-outlined {
      color: var(--color-muted);
      font-size: var(--text-base);
    }
  }

  .price-chart__tooltip-date {
    color: var(--color-muted);
    font-size: var(--text-xs);
  }

  .price-chart__tooltip-event {
    color: oklch(var(--lch-green-800));
    font-size: var(--text-xs);
    font-weight: 600;
    margin-block-start: var(--block-space-quarter);
  }
}