.box {
  composes: accessibilityOutline from "./Focus.css";
  composes: borderBox from "./Layout.css";
}

.userSelectNone {
  user-select: none;
}

.visuallyHidden {
  border: 0;

  /* clip is deprecated https: //developer.mozilla.org/en-US/docs/Web/CSS/clip */
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);

  /* clip is replaced with clip-path */
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Display */

.xsDisplayNone {
  display: none;
}

.xsDisplayFlex {
  display: flex;
  flex-direction: row;
}

.xsDisplayBlock {
  display: block;
}

.xsDisplayInlineBlock {
  display: inline-block;
}

.xsDisplayVisuallyHidden {
  composes: visuallyHidden;
}

@media (--g-sm) {
  .smDisplayNone {
    display: none;
  }

  .smDisplayFlex {
    display: flex;
    flex-direction: row;
  }

  .smDisplayBlock {
    display: block;
  }

  .smDisplayInlineBlock {
    display: inline-block;
  }

  .smDisplayVisuallyHidden {
    composes: visuallyHidden;
  }
}

@media (--g-md) {
  .mdDisplayNone {
    display: none;
  }

  .mdDisplayFlex {
    display: flex;
    flex-direction: row;
  }

  .mdDisplayBlock {
    display: block;
  }

  .mdDisplayInlineBlock {
    display: inline-block;
  }

  .mdDisplayVisuallyHidden {
    composes: visuallyHidden;
  }
}

@media (--g-lg) {
  .lgDisplayNone {
    display: none;
  }

  .lgDisplayFlex {
    display: flex;
    flex-direction: row;
  }

  .lgDisplayBlock {
    display: block;
  }

  .lgDisplayInlineBlock {
    display: inline-block;
  }

  .lgDisplayVisuallyHidden {
    composes: visuallyHidden;
  }
}

@media (--g-xl) {
  .xlDisplayNone {
    display: none;
  }

  .xlDisplayFlex {
    display: flex;
    flex-direction: row;
  }

  .xlDisplayBlock {
    display: block;
  }

  .xlDisplayInlineBlock {
    display: inline-block;
  }

  .xlDisplayVisuallyHidden {
    composes: visuallyHidden;
  }
}

@media (--g-xxl) {
  .xxlDisplayNone {
    display: none;
  }

  .xxlDisplayFlex {
    display: flex;
    flex-direction: row;
  }

  .xxlDisplayBlock {
    display: block;
  }

  .xxlDisplayInlineBlock {
    display: inline-block;
  }

  .xxlDisplayVisuallyHidden {
    composes: visuallyHidden;
  }
}

@media (--g-xxxl) {
  .xxxlDisplayNone {
    display: none;
  }

  .xxxlDisplayFlex {
    display: flex;
    flex-direction: row;
  }

  .xxxlDisplayBlock {
    display: block;
  }

  .xxxlDisplayInlineBlock {
    display: inline-block;
  }

  .xxxlDisplayVisuallyHidden {
    composes: visuallyHidden;
  }
}

/* Direction */

.xsDirectionRow {
  flex-direction: row;
}

.xsDirectionColumn {
  flex-direction: column;
}

@media (--g-sm) {
  .smDirectionRow {
    flex-direction: row;
  }

  .smDirectionColumn {
    flex-direction: column;
  }
}

@media (--g-md) {
  .mdDirectionRow {
    flex-direction: row;
  }

  .mdDirectionColumn {
    flex-direction: column;
  }
}

@media (--g-lg) {
  .lgDirectionRow {
    flex-direction: row;
  }

  .lgDirectionColumn {
    flex-direction: column;
  }
}

@media (--g-xl) {
  .xlDirectionRow {
    flex-direction: row;
  }

  .xlDirectionColumn {
    flex-direction: column;
  }
}

@media (--g-xxl) {
  .xxlDirectionRow {
    flex-direction: row;
  }

  .xxlDirectionColumn {
    flex-direction: column;
  }
}

@media (--g-xxxl) {
  .xxxlDirectionRow {
    flex-direction: row;
  }

  .xxxlDirectionColumn {
    flex-direction: column;
  }
}

/* Column */

.xsCol0 {
  width: 0;
}

.xsCol1 {
  composes: xsCol1 from "./Column.css";
}

.xsCol2 {
  composes: xsCol2 from "./Column.css";
}

.xsCol3 {
  composes: xsCol3 from "./Column.css";
}

.xsCol4 {
  composes: xsCol4 from "./Column.css";
}

.xsCol5 {
  composes: xsCol5 from "./Column.css";
}

.xsCol6 {
  composes: xsCol6 from "./Column.css";
}

.xsCol7 {
  composes: xsCol7 from "./Column.css";
}

.xsCol8 {
  composes: xsCol8 from "./Column.css";
}

.xsCol9 {
  composes: xsCol9 from "./Column.css";
}

.xsCol10 {
  composes: xsCol10 from "./Column.css";
}

.xsCol11 {
  composes: xsCol11 from "./Column.css";
}

.xsCol12 {
  composes: xsCol12 from "./Column.css";
}

@media (--g-sm) {
  .smCol0 {
    width: 0;
  }

  .smCol1 {
    composes: smCol1 from "./Column.css";
  }

  .smCol2 {
    composes: smCol2 from "./Column.css";
  }

  .smCol3 {
    composes: smCol3 from "./Column.css";
  }

  .smCol4 {
    composes: smCol4 from "./Column.css";
  }

  .smCol5 {
    composes: smCol5 from "./Column.css";
  }

  .smCol6 {
    composes: smCol6 from "./Column.css";
  }

  .smCol7 {
    composes: smCol7 from "./Column.css";
  }

  .smCol8 {
    composes: smCol8 from "./Column.css";
  }

  .smCol9 {
    composes: smCol9 from "./Column.css";
  }

  .smCol10 {
    composes: smCol10 from "./Column.css";
  }

  .smCol11 {
    composes: smCol11 from "./Column.css";
  }

  .smCol12 {
    composes: smCol12 from "./Column.css";
  }
}

@media (--g-md) {
  .mdCol0 {
    width: 0;
  }

  .mdCol1 {
    composes: mdCol1 from "./Column.css";
  }

  .mdCol2 {
    composes: mdCol2 from "./Column.css";
  }

  .mdCol3 {
    composes: mdCol3 from "./Column.css";
  }

  .mdCol4 {
    composes: mdCol4 from "./Column.css";
  }

  .mdCol5 {
    composes: mdCol5 from "./Column.css";
  }

  .mdCol6 {
    composes: mdCol6 from "./Column.css";
  }

  .mdCol7 {
    composes: mdCol7 from "./Column.css";
  }

  .mdCol8 {
    composes: mdCol8 from "./Column.css";
  }

  .mdCol9 {
    composes: mdCol9 from "./Column.css";
  }

  .mdCol10 {
    composes: mdCol10 from "./Column.css";
  }

  .mdCol11 {
    composes: mdCol11 from "./Column.css";
  }

  .mdCol12 {
    composes: mdCol12 from "./Column.css";
  }
}

@media (--g-lg) {
  .lgCol0 {
    width: 0;
  }

  .lgCol1 {
    composes: lgCol1 from "./Column.css";
  }

  .lgCol2 {
    composes: lgCol2 from "./Column.css";
  }

  .lgCol3 {
    composes: lgCol3 from "./Column.css";
  }

  .lgCol4 {
    composes: lgCol4 from "./Column.css";
  }

  .lgCol5 {
    composes: lgCol5 from "./Column.css";
  }

  .lgCol6 {
    composes: lgCol6 from "./Column.css";
  }

  .lgCol7 {
    composes: lgCol7 from "./Column.css";
  }

  .lgCol8 {
    composes: lgCol8 from "./Column.css";
  }

  .lgCol9 {
    composes: lgCol9 from "./Column.css";
  }

  .lgCol10 {
    composes: lgCol10 from "./Column.css";
  }

  .lgCol11 {
    composes: lgCol11 from "./Column.css";
  }

  .lgCol12 {
    composes: lgCol12 from "./Column.css";
  }
}

@media (--g-xl) {
  .xlCol0 {
    width: 0;
  }

  .xlCol1 {
    composes: xlCol1 from "./Column.css";
  }

  .xlCol2 {
    composes: xlCol2 from "./Column.css";
  }

  .xlCol3 {
    composes: xlCol3 from "./Column.css";
  }

  .xlCol4 {
    composes: xlCol4 from "./Column.css";
  }

  .xlCol5 {
    composes: xlCol5 from "./Column.css";
  }

  .xlCol6 {
    composes: xlCol6 from "./Column.css";
  }

  .xlCol7 {
    composes: xlCol7 from "./Column.css";
  }

  .xlCol8 {
    composes: xlCol8 from "./Column.css";
  }

  .xlCol9 {
    composes: xlCol9 from "./Column.css";
  }

  .xlCol10 {
    composes: xlCol10 from "./Column.css";
  }

  .xlCol11 {
    composes: xlCol11 from "./Column.css";
  }

  .xlCol12 {
    composes: xlCol12 from "./Column.css";
  }
}

@media (--g-xxl) {
  .xxlCol0 {
    width: 0;
  }

  .xxlCol1 {
    composes: xxlCol1 from "./Column.css";
  }

  .xxlCol2 {
    composes: xxlCol2 from "./Column.css";
  }

  .xxlCol3 {
    composes: xxlCol3 from "./Column.css";
  }

  .xxlCol4 {
    composes: xxlCol4 from "./Column.css";
  }

  .xxlCol5 {
    composes: xxlCol5 from "./Column.css";
  }

  .xxlCol6 {
    composes: xxlCol6 from "./Column.css";
  }

  .xxlCol7 {
    composes: xxlCol7 from "./Column.css";
  }

  .xxlCol8 {
    composes: xxlCol8 from "./Column.css";
  }

  .xxlCol9 {
    composes: xxlCol9 from "./Column.css";
  }

  .xxlCol10 {
    composes: xxlCol10 from "./Column.css";
  }

  .xxlCol11 {
    composes: xxlCol11 from "./Column.css";
  }

  .xxlCol12 {
    composes: xxlCol12 from "./Column.css";
  }
}

@media (--g-xxxl) {
  .xxxlCol0 {
    width: 0;
  }

  .xxxlCol1 {
    composes: xxxlCol1 from "./Column.css";
  }

  .xxxlCol2 {
    composes: xxxlCol2 from "./Column.css";
  }

  .xxxlCol3 {
    composes: xxxlCol3 from "./Column.css";
  }

  .xxxlCol4 {
    composes: xxxlCol4 from "./Column.css";
  }

  .xxxlCol5 {
    composes: xxxlCol5 from "./Column.css";
  }

  .xxxlCol6 {
    composes: xxxlCol6 from "./Column.css";
  }

  .xxxlCol7 {
    composes: xxxlCol7 from "./Column.css";
  }

  .xxxlCol8 {
    composes: xxxlCol8 from "./Column.css";
  }

  .xxxlCol9 {
    composes: xxxlCol9 from "./Column.css";
  }

  .xxxlCol10 {
    composes: xxxlCol10 from "./Column.css";
  }

  .xxxlCol11 {
    composes: xxxlCol11 from "./Column.css";
  }

  .xxxlCol12 {
    composes: xxxlCol12 from "./Column.css";
  }
}

/* Opacity */

.opacity0 {
  opacity: var(--opacity-0);
}

.opacity01 {
  opacity: 0.1;
}

.opacity02 {
  opacity: var(--opacity-200);
}

.opacity03 {
  opacity: 0.3;
}

.opacity04 {
  opacity: var(--opacity-300);
}

.opacity05 {
  opacity: 0.5;
}

.opacity06 {
  opacity: 0.6;
}

.opacity07 {
  opacity: 0.7;
}

.opacity08 {
  opacity: var(--opacity-400);
}

.opacity09 {
  opacity: var(--opacity-500);
}

.opacity1 {
  opacity: 1;
}

/* Colors */

.default {
  background-color: var(--color-background-box-default);
}

.infoBase {
  background-color: var(--color-background-box-info-base);
}

.infoWeak {
  background-color: var(--color-background-box-info-weak);
}

.errorBase {
  background-color: var(--color-background-box-error-base);
}

.errorWeak {
  background-color: var(--color-background-box-error-weak);
}

.warningBase {
  background-color: var(--color-background-box-warning-base);
}

.warningWeak {
  background-color: var(--color-background-box-warning-weak);
}

.successBase {
  background-color: var(--color-background-box-success-base);
}

.successWeak {
  background-color: var(--color-background-box-success-weak);
}

.recommendationBase {
  background-color: var(--color-background-box-recommendation-base);
}

.recommendationWeak {
  background-color: var(--color-background-box-recommendation-weak);
}

.shopping {
  background-color: var(--color-background-box-shopping);
}

.primary {
  background-color: var(--color-background-box-primary);
}

.secondary {
  background-color: var(--color-background-box-secondary);
}

.tertiary {
  background-color: var(--color-background-box-tertiary);
}

.selected {
  background-color: var(--color-background-box-selected);
}

.inverse {
  background-color: var(--color-background-box-inverse);
}

.brand {
  background-color: var(--color-background-box-brand);
}

.education {
  background-color: var(--color-background-box-education);
}

.transparent {
  background-color: var(--color-background-box-transparent);
}

.dark {
  background-color: var(--color-background-box-dark);
}

.light {
  background-color: var(--color-background-box-light);
}

.elevationAccent {
  background-color: var(--color-background-box-elevation-accent);
}

.elevationFloating {
  background-color: var(--color-background-box-elevation-floating);
}

.elevationRaised {
  background-color: var(--color-background-box-elevation-raised);
}

.lightWash {
  background-color: var(--color-background-box-lightwash);
}

.darkWash {
  background-color: var(--color-background-box-darkwash);
}

.transparentDarkGrayBg {
  background-color: var(--color-background-box-transparentdarkgray);
}