.button-xxl {
  padding: var(--button-xxl-padding-vertical) var(--button-xxl-padding-horizontal);
  min-width: var(--button-xxl-height);
  height: var(--button-xxl-height);
  font-size: var(--button-xxl-font-size);

  & svg {
    width: var(--button-xxl-font-size);
    height: var(--button-xxl-font-size);
  }

  &.button-square {
    padding: var(--button-xxl-padding-vertical);
  }

  &.button-pill {
    border-radius: calc(var(--button-xxl-height) / 2);
  }
}

.button-xl {
  padding: var(--button-xl-padding-vertical) var(--button-xl-padding-horizontal);
  min-width: var(--button-xl-height);
  height: var(--button-xl-height);
  font-size: var(--button-xl-font-size);

  & svg {
    width: var(--button-xl-font-size);
    height: var(--button-xl-font-size);
  }

  &.button-square {
    padding: var(--button-xl-padding-vertical);
  }

  &.button-pill {
    border-radius: calc(var(--button-xl-height) / 2);
  }
}

.button-l {
  padding: var(--button-l-padding-vertical) var(--button-l-padding-horizontal);
  min-width: var(--button-l-height);
  height: var(--button-l-height);
  font-size: var(--button-l-font-size);

  & svg {
    width: var(--button-l-font-size);
    height: var(--button-l-font-size);
  }

  &.button-square {
    padding: var(--button-l-padding-vertical);
  }

  &.button-pill {
    border-radius: calc(var(--button-l-height) / 2);
  }
}

.button-s {
  padding: var(--button-s-padding-vertical) var(--button-s-padding-horizontal);
  min-width: var(--button-s-height);
  height: var(--button-s-height);
  font-size: var(--button-s-font-size);

  & svg {
    width: var(--button-s-font-size);
    height: var(--button-s-font-size);
  }

  &.button-square {
    padding: var(--button-s-padding-vertical);
  }

  &.button-pill {
    border-radius: calc(var(--button-s-height) / 2);
  }
}

.button-xs {
  padding: var(--button-xs-padding-vertical) var(--button-xs-padding-horizontal);
  min-width: var(--button-xs-height);
  height: var(--button-xs-height);
  font-size: var(--button-xs-font-size);

  & svg {
    width: var(--button-xs-font-size);
    height: var(--button-xs-font-size);
  }

  &.button-square {
    padding: var(--button-xs-padding-vertical);
  }

  &.button-pill {
    border-radius: calc(var(--button-xs-height) / 2);
  }
}

.button-xxs {
  padding: var(--button-xxs-padding-vertical) var(--button-xxs-padding-horizontal);
  min-width: var(--button-xxs-height);
  height: var(--button-xxs-height);
  font-size: var(--button-xxs-font-size);

  & svg {
    width: var(--button-xxs-font-size);
    height: var(--button-xxs-font-size);
  }

  &.button-square {
    padding: var(--button-xxs-padding-vertical);
  }

  &.button-pill {
    border-radius: calc(var(--button-xxs-height) / 2);
  }
}