.pricing-slat {
  background-color: var(--green-step-2);
  padding: var(--space-s-l);

  &__info {
    background-color: var(--white);
    height: fit-content;
    padding: var(--space-s);
  }
}

.pricing-slat > .grid {
  align-items: center;
}

.pricing-slat__table {
  border-collapse: collapse;
  width: 100%;
}
.pricing-slat__table tr {
  border-block-end: 1px solid var(--grey-step-2);
}
.pricing-slat__table th {
  font-weight: 700;
  padding-bottom: var(--space-2xs);
}
.pricing-slat__table td {
  padding-block: var(--space-2xs);
}
.pricing-slat__table th,
.pricing-slat__table td {
  line-height: 1.7;
  padding-right: var(--space-2xs);
  text-align: left;
  text-wrap: nowrap;
}
.pricing-slat__table th.align-right,
.pricing-slat__table td.align-right {
  text-align: right;
}

[role="region"][aria-labelledby][tabindex] {
  /* Allow overflow of applicable divs while prevent horizontal scrolling of whole page. */
  overflow: auto;

  /* Scrolling visual cue */
  background: linear-gradient(to right, var(--white) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--white) 70%) 0 100%,
    radial-gradient(
      farthest-side at 0% 50%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      0 100%;
  background-repeat: no-repeat;
  background-color: var(--white);
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}

[role="region"][aria-labelledby][tabindex]:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}