button {
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-semibold);
  gap: var(--scale-200);
  border-radius: var(--border-radius-md);

  //span contains icons
  span {
    //first child is icon tag
    > * {
      display: flex;
      align-items: center;
    }

    i,
    svg {
      width: var(--icon-size-sm);
      height: var(--icon-size-sm);
    }
  }

  //sizes
  &.sm {
    font-size: var(--typography-size-body-sm);
    line-height: var(--line-height-body-sm);
    padding: var(--scale-200) var(--scale-300);
    height: 40px;
  }

  &.md {
    font-size: var(--typography-size-body-md);
    line-height: var(--line-height-body-md);
    padding: var(--scale-300) var(--scale-400);
    height: 44px;
  }

  &.lg {
    font-size: var(--typography-size-body-lg);
    line-height: var(--line-height-heading-h3);
    padding: var(--scale-300) var(--scale-600);
    height: 54px;
  }

  // general states
  &*[disabled] {
    cursor: not-allowed;
    background-color: var(--color-surface-disabled) !important;
    color: var(--color-text-disabled) !important;

    //spans contain icons
    span {
      color: var(--color-text-disabled-on) !important;
    }
  }

  &:focus-visible {
    outline: var(--border-width-sm) solid var(--color-border-focus);
    outline-offset: 1px;
  }

  //types
  &.primary {
    border: var(--border-width-sm) solid var(--color-surface-action-solid);
    background-color: var(--color-surface-action-solid);
    color: var(--color-text-action-on);

    //states
    &:hover {
      background-color: var(--color-surface-action-solid-hover);
    }

    &:focus-visible {
      background-color: var(--color-surface-action-solid-hover);
    }

    &[disabled] {
      border-color: var(--color-surface-disabled);
    }
  }
  &.outline-gray {
    background-color: inherit;
    border: var(--border-width-sm) solid var(--color-border-primary);
    color: var(--color-text-body);

    //spans contain icons
    span {
      color: var(--color-text-body);
    }

    &:hover {
      background-color: var(--color-surface-primary);
      border-color: var(--color-border-action-hover);
    }

    &[disabled] {
      //spans contain icons
      border-color: var(--color-border-disabled);
      border: none;
    }

    &:focus-visible {
      background-color: var(--color-surface-primary);
      border-color: var(--color-border-action-hover);
    }
  }

  &.outline-color {
    background-color: inherit;
    border: var(--border-width-sm) solid var(--color-border-secondary);
    color: var(--color-text-action);

    //spans contain icons
    span {
      color: var(--color-icon-action);
    }

    &:hover {
      background-color: var(--color-surface-action-solid-hover-light);
      border-color: var(--color-border-action-hover);
      color: var(--color-text-action-hover);
      span {
        color: var(--color-border-action-hover);
      }
    }

    &[disabled] {
      //spans contain icons
      border-color: var(--color-border-disabled);
    }

    &:focus-visible {
      background-color: var(--color-surface-action-solid-hover-light);
      border-color: var(--color-border-action-hover);
      color: var(--color-text-action-hover);
      span {
        color: var(--color-icon-action);
      }
    }
  }

  &.transparent-gray {
    background-color: inherit;
    border: 0;
    border-color: inherit;
    color: var(--color-text-body);

    &:hover {
      background-color: var(--color-surface-primary);
    }
  }

  &.transparent-color {
    background-color: inherit;
    border: 0;
    border-color: inherit;
    color: var(--color-text-action);

    //spans contain icons
    span {
      color: var(--color-icon-action);
    }

    &:hover {
      background-color: var(--color-surface-action-solid-hover-light);
      color: var(--color-text-action-hover);
      span {
        color: var(--color-border-action-hover);
      }
    }
  }

  &.link-color {
    background-color: inherit;
    border: 0;
    border-color: inherit;
    color: var(--color-text-action);

    //spans contain icons
    span {
      color: var(--color-icon-action);
    }

    &:hover {
      color: var(--color-text-action-hover);
      span {
        color: var(--color-border-action-hover);
      }
    }
  }
}