/* Copyright 2024, 2025 New Vector Ltd.
 * Copyright 2023, 2024 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.cpd-checkbox-container {
  --size: 20px;

  display: grid;
  inline-size: var(--size);
  block-size: var(--size);
}

.cpd-checkbox-input,
.cpd-checkbox-ui {
  box-sizing: border-box;
  grid-area: 1 / 1;
  inline-size: var(--size);
  block-size: var(--size);
}

.cpd-checkbox-input {
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.cpd-checkbox-ui {
  pointer-events: none;
  border-radius: 4px; /* TODO: Ought to be a token */
  border: 1px solid;
  border-color: var(--cpd-color-border-interactive-primary);

  /** Default, rest state */
  color: transparent;
}

.cpd-checkbox-ui svg {
  inline-size: var(--size);
  block-size: var(--size);

  /* compensate for the parent border */
  margin: -1px;
}

.cpd-checkbox-input:checked + .cpd-checkbox-ui {
  color: var(--cpd-color-icon-on-solid-primary);
  background-color: var(--cpd-color-bg-action-primary-rest);
  border-color: var(--cpd-color-bg-action-primary-rest);
}

.cpd-checkbox-input:focus-visible + .cpd-checkbox-ui {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}

.cpd-checkbox-input[disabled] + .cpd-checkbox-ui {
  border-color: var(--cpd-color-border-disabled);
  background: var(--cpd-color-bg-canvas-disabled);
}

.cpd-checkbox-input[readonly] {
  pointer-events: none;
}

.cpd-checkbox-input[readonly] + .cpd-checkbox-ui {
  border-color: var(--cpd-color-border-interactive-secondary);
  background: var(--cpd-color-bg-subtle-secondary);
}

.cpd-checkbox-input[disabled]:checked + .cpd-checkbox-ui {
  border-color: var(--cpd-color-bg-action-primary-disabled);
  background: var(--cpd-color-bg-action-primary-disabled);
}

.cpd-checkbox-input[readonly]:checked + .cpd-checkbox-ui {
  color: var(--cpd-color-icon-secondary);
}

@media (hover) {
  .cpd-checkbox-input:not([disabled], [readonly], :checked):hover
    + .cpd-checkbox-ui {
    color: var(--cpd-color-icon-quaternary);
    border-color: var(--cpd-color-border-interactive-hovered);

    /** TODO: have the shadow in the design tokens */
    box-shadow: 0 1.2px 2.4px 0 rgb(0 0 0 / 15%);
  }

  .cpd-checkbox-input:not([disabled], [readonly]):checked:hover
    + .cpd-checkbox-ui {
    border-color: var(--cpd-color-bg-action-primary-hovered);
    background: var(--cpd-color-bg-action-primary-hovered);
  }

  .cpd-checkbox-input[data-invalid]:not([disabled], [readonly]):checked:hover
    + .cpd-checkbox-ui {
    border-color: var(--cpd-color-bg-critical-hovered);
    background: var(--cpd-color-bg-critical-hovered);
  }
}

.cpd-checkbox-input[data-invalid]:not([disabled], :checked, [readonly])
  + .cpd-checkbox-ui {
  border-color: var(--cpd-color-border-critical-primary);
}

.cpd-checkbox-input[data-invalid]:not([disabled], [readonly]):checked
  + .cpd-checkbox-ui {
  background-color: var(--cpd-color-bg-critical-primary);
  border-color: var(--cpd-color-bg-critical-primary);
}
