.button {
  cursor: pointer;
  &:not(.button--link) {
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  }
  &.button--primary {
    align-items: center;
    background-color: var(--background-button-primary);
    border-color: var(--border-color-button-primary);
    border-radius: var(--border-radius-button);
    border-style: solid;
    border-width: var(--border-width-button-primary);
    color: var(--color-button-primary);
    cursor: pointer;
    display: inline-flex;
    font-weight: var(--weight-button);
    justify-content: center;
    position: relative;
    text-decoration: none;
    transition: all var(--transition-duration);

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

    &[disabled] {
      background: var(--background-button-primary-disabled);
      opacity: var(--opacity-button-primary-disabled);
    }
  }

  &.button--secondary {
    align-items: center;
    background-color: var(--background-button-secondary);
    border-color: var(--border-color-button-secondary);
    border-radius: var(--border-radius-button);
    border-style: solid;
    border-width: var(--border-width-button-secondary);
    color: var(--color-button-secondary);
    cursor: pointer;
    display: inline-flex;
    font-weight: var(--weight-button);
    justify-content: center;
    position: relative;
    text-decoration: none;
    transition: all var(--transition-duration);

    &:hover {
      background-color: var(--background-button-secondary-hover);
      border-color: var(--border-color-button-secondary-hover);
      color: var(--color-button-secondary-hover);
    }

    &[disabled] {
      background: var(--background-button-secondary-disabled);
      opacity: var(--opacity-button-secondary-disabled);
    }
  }

  &.button--link {
    display: flex;
    font-weight: var(--weight-button);
    align-items: center;
  }

  &.button--block {
    width: 100%;
  }

  &.button--large {
    column-gap: var(--gap-button);
    font-size: var(--size-small-breakpoint-button-lg);
    line-height: var(--line-height-button-lg);
    padding: var(--space-y-small-breakpoint-button-lg) var(--space-x-small-breakpoint-button-lg);

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

  &.button--medium {
    column-gap: var(--gap-button);
    font-size: var(--size-small-breakpoint-button-md);
    line-height: var(--line-height-button-md);
    padding: var(--space-y-small-breakpoint-button-md) var(--space-x-small-breakpoint-button-md);

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

  &.button--small {
    column-gap: var(--gap-button);
    font-size: var(--size-small-breakpoint-button-sm);
    line-height: var(--line-height-button-sm);
    padding: var(--space-y-small-breakpoint-button-sm) var(--space-x-small-breakpoint-button-sm);

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

.button-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
}

@media (width >= 768px) {
  .button {
    &.button--large {
      font-size: var(--size-medium-breakpoint-button-lg);
      padding: var(--space-y-medium-breakpoint-button-lg) var(--space-x-medium-breakpoint-button-lg);
    }

    &.button--medium {
      font-size: var(--size-medium-breakpoint-button-md);
      padding: var(--space-y-medium-breakpoint-button-md) var(--space-x-medium-breakpoint-button-md);
    }

    &.button--small {
      font-size: var(--size-medium-breakpoint-button-sm);
      padding: var(--space-y-medium-breakpoint-button-sm) var(--space-x-medium-breakpoint-button-sm);
    }
  }
}

@media (width >= 992px) {
  .button {
    &.button--large {
      font-size: var(--size-large-breakpoint-button-lg);
      padding: var(--space-y-large-breakpoint-button-lg) var(--space-x-large-breakpoint-button-lg);
    }

    &.button--medium {
      font-size: var(--size-large-breakpoint-button-md);
      padding: var(--space-y-large-breakpoint-button-md) var(--space-x-large-breakpoint-button-md);
    }

    &.button--small {
      font-size: var(--size-large-breakpoint-button-sm);
      padding: var(--space-y-large-breakpoint-button-sm) var(--space-x-large-breakpoint-button-sm);
    }
  }

  .button-group {
    flex-direction: row;
  }
}

@media (width <= 991.98px) {
  .button-group .button {
    flex: 0 0 100%;
    min-width: 100%;

    &.button--link {
      padding-left: 0;
      padding-right: 0;
    }
  }
}