@use '@muiscss/mixins/_typography.scss';
@import '@muiscss/modules/_pxToRem.scss';

.headline-h1 {
  @include typography.black;
  font-size: px-to-rem(56);
  letter-spacing: px-to-rem(-0.3);
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

.headline-h2 {
  @include typography.black;
  font-size: px-to-rem(42);
  letter-spacing: px-to-rem(-0.3);
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

.headline-h3 {
  @include typography.black;
  font-size: px-to-rem(35);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

.headline-h4 {
  @include typography.black;
  font-size: px-to-rem(28);
  letter-spacing: px-to-rem(0);
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

.headline-h5 {
  @include typography.black;
  font-size: px-to-rem(20);
  letter-spacing: px-to-rem(0);
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

.headline-h6 {
  @include typography.black;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0);
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

.subtitle-32 {
  @include typography.bold;
  font-size: px-to-rem(32);
  letter-spacing: px-to-rem(0);
  line-height: 1.14;
  text-transform: none;
  text-decoration: none;
}

.subtitle-28 {
  @include typography.bold;
  font-size: px-to-rem(28);
  letter-spacing: px-to-rem(0);
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

.subtitle-24 {
  @include typography.bold;
  font-size: px-to-rem(24);
  letter-spacing: px-to-rem(0);
  line-height: 1.15;
  text-transform: none;
  text-decoration: none;
}

.subtitle-20 {
  @include typography.bold;
  font-size: px-to-rem(20);
  letter-spacing: px-to-rem(0);
  line-height: 1.1;
  text-transform: none;
  text-decoration: none;
}

.subtitle-18 {
  @include typography.bold;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0);
  line-height: 1.1;
  text-transform: none;
  text-decoration: none;
}

.subtitle-16 {
  @include typography.bold;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0);
  line-height: 1.1;
  text-transform: none;
  text-decoration: none;
}

.body-24-regular {
  @include typography.regular;
  font-size: px-to-rem(24);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-24-medium {
  @include typography.medium;
  font-size: px-to-rem(24);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-24-bold {
  @include typography.bold;
  font-size: px-to-rem(24);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-24-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(24);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-24-capitalize {
  @include typography.regular;
  font-size: px-to-rem(24);
  letter-spacing: px-to-rem(1);
  line-height: 1.55;
  text-transform: uppercase;
  text-decoration: none;
}

.body-18-regular {
  @include typography.regular;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-18-medium {
  @include typography.medium;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-18-bold {
  @include typography.bold;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-18-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-18-capitalize {
  @include typography.regular;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: uppercase;
  text-decoration: none;
}

.body-16-regular {
  @include typography.regular;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-16-medium {
  @include typography.medium;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-16-semibold {
  @include typography.semibold;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-16-bold {
  @include typography.bold;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-16-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-16-capitalize {
  @include typography.regular;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: uppercase;
  text-decoration: none;
}

.body-14-regular {
  @include typography.regular;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-14-medium {
  @include typography.medium;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-14-bold {
  @include typography.bold;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-14-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-14-capitalize {
  @include typography.regular;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: uppercase;
  text-decoration: none;
}

.body-12-regular {
  @include typography.regular;
  font-size: px-to-rem(12);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-12-medium {
  @include typography.medium;
  font-size: px-to-rem(12);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-12-bold {
  @include typography.bold;
  font-size: px-to-rem(12);
  letter-spacing: px-to-rem(0);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-12-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(12);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-12-capitalize {
  @include typography.regular;
  font-size: px-to-rem(12);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: uppercase;
  text-decoration: none;
}

.body-10-regular {
  @include typography.regular;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-10-medium {
  @include typography.medium;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-10-bold {
  @include typography.bold;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-10-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: none;
  text-decoration: none;
}

.body-10-capitalize {
  @include typography.regular;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.55;
  text-transform: uppercase;
  text-decoration: none;
}

.button-20-medium {
  @include typography.medium;
  font-size: px-to-rem(20);
  letter-spacing: px-to-rem(0);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.button-18-medium {
  @include typography.medium;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.button-16-medium {
  @include typography.medium;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.button-14-medium {
  @include typography.medium;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(0);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.button-12-medium {
  @include typography.medium;
  font-size: px-to-rem(12);
  letter-spacing: px-to-rem(0);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.button-10-medium {
  @include typography.medium;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.caption-16-regular {
  @include typography.regular;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-16-bold {
  @include typography.bold;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-16-medium {
  @include typography.medium;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-16-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-16-capitalize {
  @include typography.regular;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(1);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.caption-14-bold {
  @include typography.bold;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-14-regular {
  @include typography.regular;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-14-medium {
  @include typography.medium;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-14-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-14-capitalize {
  @include typography.regular;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(1);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.caption-12-regular {
  @include typography.regular;
  font-size: px-to-rem(12);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-12-medium {
  @include typography.medium;
  font-size: px-to-rem(12);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-12-bold {
  @include typography.bold;
  font-size: px-to-rem(12);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-12-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(12);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-12-capitalize {
  @include typography.regular;
  font-size: px-to-rem(12);
  letter-spacing: px-to-rem(1);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.caption-10-regular {
  @include typography.regular;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-10-medium {
  @include typography.medium;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-10-bold {
  @include typography.bold;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-10-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-10-capitalize {
  @include typography.regular;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(1);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.caption-8-regular {
  @include typography.regular;
  font-size: px-to-rem(8);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-8-medium {
  @include typography.medium;
  font-size: px-to-rem(8);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-8-bold {
  @include typography.bold;
  font-size: px-to-rem(8);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-8-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(8);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-8-capitalize {
  @include typography.regular;
  font-size: px-to-rem(8);
  letter-spacing: px-to-rem(1);
  line-height: 120;
  text-transform: uppercase;
  text-decoration: none;
}

.caption-18-regular {
  @include typography.regular;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-18-medium {
  @include typography.medium;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-18-bold {
  @include typography.bold;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-18-monospace {
  @include typography.regularMono;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.2;
  text-transform: none;
  text-decoration: none;
}

.caption-18-capitalize {
  @include typography.regular;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(1);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.digits-64-bold {
  @include typography.bold;
  font-size: px-to-rem(64);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.digits-64-medium {
  @include typography.medium;
  font-size: px-to-rem(64);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.digits-56-bold {
  @include typography.bold;
  font-size: px-to-rem(56);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.digits-56-medium {
  @include typography.medium;
  font-size: px-to-rem(56);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.digits-40-bold {
  @include typography.bold;
  font-size: px-to-rem(40);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.digits-40-medium {
  @include typography.medium;
  font-size: px-to-rem(40);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.digits-32-bold {
  @include typography.bold;
  font-size: px-to-rem(32);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.digits-32-medium {
  @include typography.medium;
  font-size: px-to-rem(32);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.digits-24-bold {
  @include typography.bold;
  font-size: px-to-rem(24);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.digits-24-medium {
  @include typography.medium;
  font-size: px-to-rem(24);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.digits-18-bold {
  @include typography.bold;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.digits-18-medium {
  @include typography.medium;
  font-size: px-to-rem(18);
  letter-spacing: px-to-rem(-0.2);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
}

.other-componentlabel {
  @include typography.black;
  font-size: px-to-rem(14);
  letter-spacing: px-to-rem(4);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
}

.other-swatch-pill-capitalize {
  @include typography.semibold;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.other-swatchsubtext {
  @include typography.regular;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: lowercase;
  text-decoration: none;
}

.other-swatchsubtextuppercase {
  @include typography.regular;
  font-size: px-to-rem(16);
  letter-spacing: px-to-rem(0);
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.other-swatch-pill-lowercase {
  @include typography.semibold;
  font-size: px-to-rem(10);
  letter-spacing: px-to-rem(0.5);
  line-height: 1.2;
  text-transform: lowercase;
  text-decoration: none;
}

.drop-shadow-large-down-10 {
  box-shadow: px-to-rem(0) px-to-rem(4) px-to-rem(24) px-to-rem(0) rgba(0, 0, 0, 0.05);
}

.drop-shadow-large-up-10 {
  box-shadow: px-to-rem(0) px-to-rem(-4) px-to-rem(24) px-to-rem(0) rgba(0, 0, 0, 0.05);
}

.drop-shadow-medium-10 {
  box-shadow: px-to-rem(0) px-to-rem(1) px-to-rem(20) px-to-rem(0) rgba(0, 0, 0, 0.05);
}

.drop-shadow-arrow-top {
  box-shadow: px-to-rem(0) px-to-rem(2) px-to-rem(16) px-to-rem(0) rgba(0, 0, 0, 0.1);
}