.button {
  composes: borderBox minWidth60 from "./Layout.css";
  composes: noBorder from "./Borders.css";
  border-radius: var(--rounding-600);
}

.buttonVr {
  border-color: transparent;
  box-sizing: border-box;
  text-wrap: balance;
}

.parentButton {
  composes: paddingX0 from "./boxWhitespace.css";
  composes: paddingY0 from "./boxWhitespace.css";
  background-color: var(--color-transparent);
}

.childrenDiv {
  composes: flex from "./Layout.css";
  composes: xsItemsCenter from "./Layout.css";
  composes: justifyCenter from "./Layout.css";
  composes: fullWidth from "./TapArea.css";
}

.sm {
  composes: small from "./Layout.css";
  composes: paddingX300 from "./boxWhitespace.css";
  composes: paddingY100 from "./boxWhitespace.css";
}

.md {
  composes: medium from "./Layout.css";
  composes: paddingX300 from "./boxWhitespace.css";
  composes: paddingY200 from "./boxWhitespace.css";
}

.lg {
  composes: large from "./Layout.css";
  composes: paddingX400 from "./boxWhitespace.css";
  composes: paddingY300 from "./boxWhitespace.css";
}

.smVr {
  border-radius: var(--sema-rounding-200);
  min-height: 24px;
  padding: var(--sema-space-100) var(--sema-space-200);
}

.smLinkVr {
  border-radius: var(--sema-rounding-200);
  min-height: 28px;
  padding: var(--sema-space-100) var(--sema-space-200);
}

.mdVr {
  border-radius: var(--sema-rounding-300);
  min-height: 32px;
  padding: var(--sema-space-150) var(--sema-space-300);
}

.mdLinkVr {
  border-radius: var(--rounding-300);
  min-height: 36px;
  padding: var(--sema-space-150) var(--sema-space-300);
}

a.smVr:focus {
  padding: var(--sema-space-100)
    calc(var(--sema-space-200) + var(--g-border-width-lg));
}

a.lgVr:focus {
  padding: var(--sema-space-150)
    calc(var(--sema-space-300) + var(--g-border-width-lg));
}

.lgVr {
  border-radius: var(--sema-rounding-400);
  min-height: 44px;
  padding: var(--sema-space-200) var(--sema-space-400);
}

.lgLinkVr {
  border-radius: var(--sema-rounding-400);
  min-height: 48px;
  padding: var(--sema-space-200) var(--sema-space-400);
}

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

.inline {
  composes: inlineBlock from "./Layout.css";
}

.enabled {
  composes: pointer from "./Cursor.css";
}

/* STATES */

.disabled {
  background-color: var(--color-background-button-disabled-default);
  cursor: default;
  pointer-events: none;
}

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

.vrFocused:focus {
  border: var(--g-border-width-lg) solid;
  outline: var(--g-border-width-lg) solid;
  outline-offset: 0;
}

.defaultFocus:focus {
  border-color: var(--sema-color-border-focus-inner-default);
  outline-color: var(--sema-color-border-focus-outer-default);
}

.inverseFocus:focus {
  border-color: var(--sema-color-border-focus-inner-inverse);
  outline-color: var(--sema-color-border-focus-outer-inverse);
}

/* COLORS */

.red {
  background-color: var(--color-background-button-primary-default);
}

.red:hover {
  background-color: var(--color-background-button-primary-hover);
}

.red:active {
  background-color: var(--color-background-button-primary-active);
}

.gray {
  background-color: var(--color-background-button-secondary-default);
}

.gray:hover {
  background-color: var(--color-background-button-secondary-hover);
}

.gray:active {
  background-color: var(--color-background-button-secondary-active);
}

.transparent {
  background-color: var(--color-background-button-tertiary-default);
}

.transparent:hover {
  background-color: var(--color-background-button-tertiary-hover);
}

.transparent:active {
  background-color: var(--color-background-button-tertiary-active);
}

.transparentWhiteText {
  background-color: var(--color-background-button-tertiary-default);
}

.transparentWhiteText:hover {
  background-color: var(--color-background-button-semitransparentdark-hover);
}

.transparentWhiteText:active {
  background-color: var(--color-background-button-semitransparentdark-active);
}

.blue {
  background-color: var(--color-background-button-shopping-default);
}

.blue:hover {
  background-color: var(--color-background-button-shopping-hover);
}

.blue:active {
  background-color: var(--color-background-button-shopping-active);
}

/* COLORS ON BACKGROUND */

.semiTransparentWhite {
  background-color: var(
    --color-background-button-semitransparentdefault-default
  );
}

.semiTransparentWhite:hover {
  background-color: var(--color-background-button-semitransparentdefault-hover);
}

.semiTransparentWhite:active {
  background-color: var(
    --color-background-button-semitransparentdefault-active
  );
}

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

.white:hover {
  background-color: var(--color-background-button-white-hover);
}

.white:active {
  background-color: var(--color-background-button-white-active);
}

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

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

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

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

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

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