$compare-switch-breakpoint: m;

:root {
  --compare-background-color: var(--color-cyan-light);
  --compare-secondary-background-color: var(--color-blue-light);
  --compare-tertiary-background-color: var(--color-orange-light);
  --compare-number-line-color: var(--color-orange);
  --compare-yes-icon-color: var(--color-orange);
  --compare-no-icon-color: var(--color-midnight);
  --compare-package-icon-color: var(--color-orange);

  @include use-responsive-sizing(--compare-padding-block, responsive-map(xs 2.5rem, xl 5rem));
}

.compare {
  padding-block: var(--compare-padding-block);
  text-align: center;

  @include mq($from: $compare-switch-breakpoint) {
    background-color: var(--compare-background-color);
  }
}

.compare__inner {
  @include use-container($start-breakpoint: $compare-switch-breakpoint);
}

.compare__headline {
  margin-block-end: var(--compare-padding-block);
}

.compare__package {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.compare__package-icon {
  color: var(--compare-package-icon-color);
  display: block;
  font-size: 6rem;
}

.compare__package-headline {
  --headline-kicker-font-weight: var(--font-weight-regular);
  --headline-kicker-spacing: 0.5rem;
}

.compare__yes {
  color: var(--compare-yes-icon-color);
  flex-shrink: 0;
  font-size: 3rem;
}

.compare__no {
  color: var(--compare-no-icon-color);
  flex-shrink: 0;
  font-size: 3rem;
}

.compare__number {
  display: inline-block;
  flex-shrink: 0;
  font-size: 2.8rem;
  font-weight: var(--font-weight-semibold);
  inline-size: 3rem;
  line-height: 1;
  overflow: visible;
  padding-block-end: 0.2rem;
  position: relative;
  text-align: center;
  transform: translateY(-0.3rem);

  &::after {
    background-color: var(--compare-number-line-color);
    block-size: 0.8rem;
    content: '';
    inline-size: 100%;
    inset-block-end: -0.8rem;
    inset-inline-start: 0;
    mask-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 191 49"><path fill="#000" d="m106.8 6 24.4-3.6A127 127 0 0 1 148 .5h.7c.5 0 .7 0 1.2.2l1 .1c2 .5 2 .5 6 3.9l1.1 3.4c1.6 4.5 1.2 5.1-1 9v.2l7.1 1.4 3.1.6 4.2.7c7.1 1.2 13.4 1.9 19.4 2.1l-.9 20.8a174 174 0 0 1-18-1.7l-3.9-.6a543 543 0 0 1-16.8-3.2L134.4 34l-2.7-.5c-6.4-1.2-10.7-3-12.6-8l-.1-.3-12.7 2A739.7 739.7 0 0 0 53 37.8l-35.7 8.3L5 48.9.7 28.5l8.5-1.9 19.2-4.3 16.8-4c22.7-5.2 36.7-8.2 50.3-10.5l3.8-.6 7.5-1.2Z" /></svg>');
    mask-repeat: no-repeat;
    position: absolute;
  }
}

.compare__sections {
  @include mq($from: $compare-switch-breakpoint) {
    display: none;
  }
}

.compare__section {
  background-color: var(--compare-background-color);
  padding-block: 3.5rem;
  padding-inline: var(--inner-container-padding);

  &:nth-child(3n+2) {
    background-color: var(--compare-secondary-background-color);
  }

  &:nth-child(3n+3) {
    background-color: var(--compare-tertiary-background-color);
  }
}

.compare__section-items {
  display: grid;
  gap: 1rem;
  margin-block-start: 2rem;
}

.compare__section-item {
  align-items: flex-start;
  background-color: rgba(#fff, 0.4);
  display: flex;
  gap: 2rem;
  line-height: var(--line-height-default);
  padding-block: 2rem;
  padding-inline: 2rem;
  text-align: start;
}

.compare__section-item-text {
  align-self: center;
  margin-block: -0.5rem;
}

.compare__section-footer {
  font-size: 2.4rem;
  font-weight: var(--font-weight-semibold);
  margin-block-start: 2rem;
}

.compare__table {
  border-collapse: separate;
  border-spacing: 2.5rem 0;
  inline-size: 100%;
  table-layout: fixed;
  text-align: center;

  @include mq($until: $compare-switch-breakpoint) {
    display: none;
  }
}

.compare__table-row {
  position: relative;
}

.compare__table-cell {
  font-size: 1.8rem;
  line-height: 1.22;
  min-inline-size: 25rem;
  padding-block: 3.5rem;
  vertical-align: middle;
  word-wrap: break-word;

  .compare__table-head & {
    vertical-align: bottom;
  }

  .compare__table-foot & {
    font-size: 2.4rem;
    font-weight: var(--font-weight-semibold);
    vertical-align: top;
  }

  &:first-child {
    font-weight: var(--font-weight-semibold);
    inline-size: 30rem;
    text-align: start;
  }

  &:not(:first-child) {
    background-color: rgba($color-white, 0.4);
  }

  .compare__table-body &:first-child::before,
  .compare__table-foot &:first-child::before {
    background-color: rgba($color-midnight, 0.2);
    block-size: 2px;
    content: '';
    inline-size: 100%;
    inset-block-start: 0;
    inset-inline: 0;
    position: absolute;
  }

  .compare__table-foot &:first-child::before {
    block-size: 4px;
  }
}

.compare__button {
  margin-block-start: var(--compare-padding-block);

  @include use-container();
}