.button-icon {
  padding-top: var(--button-icon-padding);
  padding-bottom: var(--button-icon-padding);

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

  & span {
    vertical-align: middle;
  }

  & svg {
    display: inline-block;
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    vertical-align: middle;

    &:not(:first-child) {
      margin-left: var(--button-icon-margin);
    }

    &:not(:last-child) {
      margin-right: var(--button-icon-margin);
    }
  }
}

a.button-icon {
  display: inline-flex;
  align-items: center;

  &.button-block {
    display: flex;
    justify-content: space-between;
  }

  & span,
  & svg {
    flex: none;
  }
}

.button-xxs.button-icon {
  padding-top: var(--button-icon-xxs-padding);
  padding-bottom: var(--button-icon-xxs-padding);

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

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

.button-xs.button-icon {
  padding-top: var(--button-icon-xs-padding);
  padding-bottom: var(--button-icon-xs-padding);

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

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

.button-s.button-icon {
  padding-top: var(--button-icon-s-padding);
  padding-bottom: var(--button-icon-s-padding);

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

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

.button-l.button-icon {
  padding-top: var(--button-icon-l-padding);
  padding-bottom: var(--button-icon-l-padding);

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

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

.button-xl.button-icon {
  padding-top: var(--button-icon-xl-padding);
  padding-bottom: var(--button-icon-xl-padding);

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

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

.button-xxl.button-icon {
  padding-top: var(--button-icon-xxl-padding);
  padding-bottom: var(--button-icon-xxl-padding);

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

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