/*
Copyright 2023, 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.button {
  border-radius: var(--cpd-radius-pill-effect);
  cursor: pointer;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cpd-space-2x);
  box-sizing: border-box;
  font: var(--cpd-font-body-md-semibold);
  transition-duration: 0.1s;
  transition-property: color, background-color, border-color;
}

a.button {
  /* Make the width match that of a real button */
  inline-size: max-content;

  /* Buttons should not be underlined */
  text-decoration: none;
}

.button > svg {
  transition: color 0.1s;
}

.button[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: all !important;
  color: var(--cpd-color-text-disabled) !important;
}

.button[aria-disabled="true"] > svg {
  color: var(--cpd-color-icon-disabled) !important;
}

/**
 * SIZES
 */

.button[data-size="lg"] {
  padding-block: var(--cpd-space-2x);
  padding-inline: var(--cpd-space-8x);
  min-block-size: var(--cpd-space-12x);

  &.icon-only {
    padding-inline: var(--cpd-space-2x);
    block-size: var(--cpd-space-12x);
    inline-size: var(--cpd-space-12x);
  }
}

.button[data-size="lg"].has-icon:not(.icon-only) {
  padding-inline-start: var(--cpd-space-7x);
}

.button[data-size="sm"] {
  padding-block: var(--cpd-space-1x);
  padding-inline: var(--cpd-space-5x);
  min-block-size: var(--cpd-space-9x);

  &.icon-only {
    padding-inline: var(--cpd-space-1x);
    block-size: var(--cpd-space-9x);
    inline-size: var(--cpd-space-9x);
  }
}

.button[data-size="sm"].has-icon:not(.icon-only) {
  padding-inline-start: var(--cpd-space-4x);
}

/**
 * KINDS
 */

.button[data-kind="primary"] {
  color: var(--cpd-color-text-on-solid-primary);
  background: var(--cpd-color-bg-action-primary-rest);
  border-width: 0;
}

.button[data-kind="primary"] > svg {
  color: var(--cpd-color-icon-on-solid-primary);
}

@media (hover) {
  .button[data-kind="primary"]:hover {
    background: var(--cpd-color-bg-action-primary-hovered);
  }
}

.button[data-kind="primary"]:active,
.button[data-kind="primary"][aria-expanded="true"] {
  background: var(--cpd-color-bg-action-primary-pressed);
}

.button[data-kind="primary"][aria-disabled="true"] {
  /* !important to override destructive background */
  background: var(--cpd-color-bg-subtle-primary) !important;
}

.button[data-kind="primary"].destructive {
  background: var(--cpd-color-bg-critical-primary);
}

@media (hover) {
  .button[data-kind="primary"].destructive:hover {
    background: var(--cpd-color-bg-critical-hovered);
  }
}

.button[data-kind="primary"].destructive:active,
.button[data-kind="primary"].destructive[aria-expanded="true"] {
  /* TODO: We're waiting for this value to be formalized as a semantic token */
  background: var(--cpd-color-red-1100);
}

.button[data-kind="secondary"] {
  border: 1px solid var(--cpd-color-border-interactive-secondary);
  color: var(--cpd-color-text-primary);
  background: var(--cpd-color-bg-canvas-default);
}

.button[data-kind="secondary"] > svg {
  color: var(--cpd-color-icon-primary);
}

@media (hover) {
  .button[data-kind="secondary"]:hover {
    border-color: var(--cpd-color-border-interactive-hovered);
    background: var(--cpd-color-bg-subtle-secondary);
  }
}

.button[data-kind="secondary"]:active,
.button[data-kind="secondary"][aria-expanded="true"] {
  border-color: var(--cpd-color-border-interactive-hovered);
  background: var(--cpd-color-bg-subtle-primary);
}

.button[data-kind="secondary"][aria-disabled="true"] {
  /* !important to override destructive values */
  border-color: var(--cpd-color-border-interactive-secondary) !important;
  background: var(--cpd-color-bg-subtle-secondary) !important;
}

.button[data-kind="secondary"].destructive {
  border-color: var(--cpd-color-border-critical-subtle);
  color: var(--cpd-color-text-critical-primary);
}

.button[data-kind="secondary"].destructive > svg {
  color: var(--cpd-color-icon-critical-primary);
}

@media (hover) {
  .button[data-kind="secondary"].destructive:hover {
    border-color: var(--cpd-color-border-critical-hovered);
    background: var(--cpd-color-bg-critical-subtle);
  }
}

.button[data-kind="secondary"].destructive:active,
.button[data-kind="secondary"].destructive[aria-expanded="true"] {
  border-color: var(--cpd-color-border-critical-hovered);
  background: var(--cpd-color-bg-critical-subtle-hovered);
}

.button[data-kind="tertiary"] {
  border: none;
  color: var(--cpd-color-text-primary);
  text-decoration: underline;
  background: transparent;
}

@media (hover) {
  .button[data-kind="tertiary"]:hover {
    background: var(--cpd-color-bg-subtle-secondary);
  }
}

.button[data-kind="tertiary"]:active,
.button[data-kind="tertiary"][aria-expanded="true"] {
  background: var(--cpd-color-bg-subtle-primary);
}

.button[data-kind="tertiary"][aria-disabled="true"] {
  color: var(--cpd-color-text-disabled);

  /* !important to override destructive background */
  background: transparent !important;
}

.button[data-kind="tertiary"].destructive {
  color: var(--cpd-color-text-critical-primary);
}

@media (hover) {
  .button[data-kind="tertiary"].destructive:hover {
    background: var(--cpd-color-bg-critical-subtle);
  }
}

.button[data-kind="tertiary"].destructive:active,
.button[data-kind="tertiary"].destructive[aria-expanded="true"] {
  background: var(--cpd-color-bg-critical-subtle-hovered);
}

@media (forced-colors: active) {
  .button[data-kind="primary"] {
    outline: 1px solid transparent;
  }
}