:root {
  --common-fontFamily-primary: @common-fontFamily-primary;

  --common-fontSize-base: @common-fontSize-base;
  --common-lineHeight-base: @common-lineHeight-base;

  --common-fontSize-small: @common-fontSize-small;
  --common-lineHeight-small: @common-lineHeight-small;

  --common-fontSize-large: @common-fontSize-large;
  --common-lineHeight-large: @common-lineHeight-large;

  --common-baseColor-primary: @common-baseColor-primary;
  --common-baseColor-secondary: @common-baseColor-secondary;
  --common-baseColor-hint: @common-baseColor-hint;
  --common-baseColor-divider: @common-baseColor-divider;

  --common-darkColor-primary: @common-darkColor-primary;
  --common-darkColor-secondary: @common-darkColor-secondary;
  --common-darkColor-hint: @common-darkColor-hint;
  --common-darkColor-divider: @common-darkColor-divider;

  --common-lightColor-primary: @common-lightColor-primary;
  --common-lightColor-secondary: @common-lightColor-secondary;
  --common-lightColor-hint: @common-lightColor-hint;
  --common-lightColor-divider: @common-lightColor-divider;

  --common-accentColor-primary: @common-accentColor-primary;

  --common-successColor-primary: @common-successColor-primary;
  --common-warningColor-primary: @common-warningColor-primary;
  --common-dangerColor-primary: @common-dangerColor-primary;

  --common-backgroundColor-base: @common-backgroundColor-base;
  --common-backgroundColor-dark: @common-backgroundColor-dark;
  --common-backgroundColor-light: @common-backgroundColor-light;

  --common-boxShadow-primary: @common-boxShadow-primary;

  --common-borderRadius-primary: @common-borderRadius-primary;

  --common-animationDuration-primary: @common-animationDuration-primary;
  --common-animationTimingFunction-primary: @common-animationTimingFunction-primary;

  --common-indent-base: @common-indent-base;
  --common-indent-small: @common-indent-small;
  --common-indent-large: @common-indent-large;

  --common-elementBase-maxWidth: @common-elementBase-maxWidth;

  --common-elementGap-vertical: @common-elementGap-vertical;
  --common-elementGap-horizontal: @common-elementGap-horizontal;

  --common-elementItem-width: @common-elementItem-width;

  --common-blockGap-vertical: @common-blockGap-vertical;
  --common-blockGap-horizontal: @common-blockGap-horizontal;

  @media (max-width: @common-breakpoint-sm - 1px) {
    --common-blockGap-horizontal: ~"calc(@{common-blockGap-horizontal} / 2)";
  }
}

.common-text-base {
  #common.text-base();
}

.common-text-small {
  #common.text-small();
}

.common-text-large {
  #common.text-large();
}

.common-text-uppercase {
  #common.text-uppercase();
}

.common-box-base {
  #common.box-base();
}

.common-box-dark {
  #common.box-dark();
}

.common-box-light {
  #common.box-light();
}

.common-element-base {
  #common.element-base();
}

.common-element-item {
  #common.element-item();
}

.common-block-base {
  #common.block-base();
}

.common-base-color-primary {
  color: var(--common-baseColor-primary);
}

.common-base-color-secondary {
  color: var(--common-baseColor-secondary);
}

.common-base-color-hint {
  color: var(--common-baseColor-hint);
}

.common-base-color-divider {
  color: var(--common-baseColor-divider);
}

.common-dark-color-primary {
  color: var(--common-darkColor-primary);
}

.common-dark-color-secondary {
  color: var(--common-darkColor-secondary);
}

.common-dark-color-hint {
  color: var(--common-darkColor-hint);
}

.common-dark-color-divider {
  color: var(--common-darkColor-divider);
}

.common-light-color-primary {
  color: var(--common-lightColor-primary);
}

.common-light-color-secondary {
  color: var(--common-lightColor-secondary);
}

.common-light-color-hint {
  color: var(--common-lightColor-hint);
}

.common-light-color-divider {
  color: var(--common-lightColor-divider);
}

.common-accent-color-primary {
  color: var(--common-accentColor-primary);
}

.common-success-color-primary {
  color: var(--common-successColor-primary);
}

.common-warning-color-primary {
  color: var(--common-warningColor-primary);
}

.common-danger-color-primary {
  color: var(--common-dangerColor-primary);
}

.common-box-shadow-primary {
  box-shadow: var(--common-boxShadow-primary);
}

.common-border-radius-primary {
  border-radius: var(--common-borderRadius-primary);
}
