/* Copyright 2023 The Matrix.org Foundation C.I.C.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.cpd-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;
}

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

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

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

/**
 * SIZES
 */

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

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

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

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

/**
 * KINDS
 */

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

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

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

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

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

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

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

.cpd-button[data-kind="primary"].destructive:active,
.cpd-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);
}

.cpd-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) {
  .cpd-button[data-kind="secondary"]:hover {
    border-color: var(--cpd-color-border-interactive-hovered);
    background: var(--cpd-color-bg-subtle-secondary);
  }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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