/*
Copyright 2025 New Vector Ltd.
Copyright 2023 The Matrix.org Foundation C.I.C.
Copyright 2023 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.
*/

.container {
  display: grid;
  inline-size: 2.25rem;
  block-size: 1.25rem;
  box-sizing: border-box;
}

.container > * {
  grid-area: 1/1;
  inline-size: inherit;
  block-size: inherit;
  box-sizing: inherit;
}

.container > .input {
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.container > .input[disabled] {
  cursor: not-allowed;
}

.ui {
  pointer-events: none;
  border-radius: var(--cpd-radius-pill-effect);
  border: 1px solid var(--cpd-color-border-interactive-primary);
  background: var(--cpd-color-bg-canvas-default);
  position: relative;
  padding: 1px;
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-property: background-color, border-color;
}

.input:checked + .ui {
  background: var(--cpd-color-bg-accent-rest);
  border-color: var(--cpd-color-bg-accent-rest);
}

.ui::after {
  --dot-color: var(--cpd-color-icon-secondary);

  content: "";
  display: block;
  block-size: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--dot-color);

  /* Additional style to ensure visibility in contrast-mode */
  border: 1px solid var(--dot-color);
  box-sizing: border-box;
  transform: translateX(0);
  transition-duration: 0.2s;
  transition-timing-function: ease-in-out;
  transition-property: background-color, transform;
}

/* Note the use of :focus-visible rather than :focus to avoid showing the focus
ring after a simple click */
.input:focus-visible + .ui {
  outline: 2px solid var(--cpd-color-border-focused);
  outline-offset: 1px;
}

:checked + .ui::after {
  --dot-color: var(--cpd-color-icon-on-solid-primary);

  transform: translateX(100%);
}

@media (hover) {
  :checked:not([disabled]):hover + .ui {
    background: var(--cpd-color-bg-accent-hovered);
    border-color: var(--cpd-color-bg-accent-hovered);
  }
}

:checked:active + .ui {
  background: var(--cpd-color-bg-accent-hovered);
  border-color: var(--cpd-color-bg-accent-hovered);
}

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

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

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

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

.input[disabled] + .ui::after {
  --dot-color: var(--cpd-color-bg-action-primary-disabled);
}

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

.input[readonly]:checked + .ui::after {
  --dot-color: var(--cpd-color-icon-on-solid-primary);
}

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

.input[disabled]:checked + .ui::after {
  --dot-color: var(--cpd-color-icon-on-solid-primary);
}

@media (hover) {
  .input:not(:checked, [disabled], [readonly]):hover + .ui {
    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%);
  }
}

.input:not(:checked, [disabled], [readonly]):active + .ui {
  border-color: var(--cpd-color-border-interactive-hovered);
}