/* 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;
}

.cpd-button[disabled] {
  cursor: not-allowed;
  pointer-events: all !important;
}

/**
 * SIZES
 */

.cpd-button[data-size="lg"] {
  font: var(--cpd-font-body-lg-semibold);
  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"] {
  font: var(--cpd-font-body-md-semibold);
  padding-block: var(--cpd-space-1x);
  padding-inline: var(--cpd-space-6x);
  min-block-size: var(--cpd-space-9x);
}

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

/**
 * 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;
}

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

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

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

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

@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 {
  border-color: var(--cpd-color-border-interactive-hovered);
  background: var(--cpd-color-bg-subtle-primary);
}

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

.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 {
  background: var(--cpd-color-bg-subtle-primary);
}

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

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

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

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

.cpd-button[data-kind="destructive"][disabled] {
  border-color: var(--cpd-color-border-interactive-secondary);
  color: var(--cpd-color-text-disabled);
  background: var(--cpd-color-bg-subtle-secondary);
}
