#common() {
  .text-base() {
    font-size: var(--common-fontSize-base);
    line-height: var(--common-lineHeight-base);
  }

  .text-small() {
    font-size: var(--common-fontSize-small);
    line-height: var(--common-lineHeight-small);
  }

  .text-large() {
    font-size: var(--common-fontSize-large);
    line-height: var(--common-lineHeight-large);
  }

  .text-uppercase() {
    text-transform: uppercase;
    letter-spacing: 0.07em;
  }

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

  .box-dark() {
    --common-baseColor-primary: var(--common-lightColor-primary);
    --common-baseColor-secondary: var(--common-lightColor-secondary);
    --common-baseColor-hint: var(--common-lightColor-hint);
    --common-baseColor-divider: var(--common-lightColor-divider);

    color: var(--common-lightColor-primary);
    background-color: var(--common-backgroundColor-dark);
  }

  .box-light() {
    --common-baseColor-primary: var(--common-darkColor-primary);
    --common-baseColor-secondary: var(--common-darkColor-secondary);
    --common-baseColor-hint: var(--common-darkColor-hint);
    --common-baseColor-divider: var(--common-darkColor-divider);

    color: var(--common-darkColor-primary);
    background-color: var(--common-backgroundColor-light);
  }

  .element-base() {
    display: flex;
    flex-wrap: wrap;
    width: ~"calc(100% + var(--common-elementGap-horizontal))";
    max-width: ~"calc(var(--common-elementBase-maxWidth) + var(--common-elementGap-horizontal))";
    margin-right: ~"calc(var(--common-elementGap-horizontal) * -1)";
    margin-bottom: ~"calc(var(--common-elementGap-vertical) * -1)";

    & + & {
      margin-top: var(--common-elementGap-vertical);
    }
  }

  .element-item() {
    width: ~"calc(var(--common-elementItem-width) - var(--common-elementGap-horizontal))";
    margin-right: var(--common-elementGap-horizontal);
    margin-bottom: var(--common-elementGap-vertical);
  }

  .block-base() {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: var(--common-blockGap-vertical);
    padding-right: var(--common-blockGap-horizontal);
    padding-bottom: var(--common-blockGap-vertical);
    padding-left: var(--common-blockGap-horizontal);
  }
}