/*
 * DO NOT EDIT THIS FILE.
 * See the following change record for more information,
 * https://www.drupal.org/node/3084859
 * @preserve
 */

/*
 * @file
 * Single checkbox: show as toggle.
 *
 * @todo Background color should use relative color notation, with lightness
 * hard coded while in dark mode.
 */

:not(.form-checkboxes, td, .tabledrag-cell-content__item, .media-library-item__click-to-select-checkbox, .field-content, .ajax-new-content, .tablesaw-cell-content) > .form-type--checkbox {
  position: relative;
  margin-inline-start: 0;

  input {
    all: unset;
    appearance: none;
    position: relative;
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    width: 2.5rem;
    height: 1.5rem;
    cursor: pointer;
    vertical-align: top;
    border: 3px solid transparent;
    border-radius: var(--admin-radius-l);
    background-color: var(--admin-color-text-disabled);
    clip-path: circle(var(--admin-space-l) at 50% 50%); /* Fix Safari bug */

    .gin--dark-mode & {
      background-color: var(--admin-color-bg-input);
    }

    &::before {
      position: absolute;
      width: 100%;
      height: 100%;
      content: "";
      transform: translateX(-1rem);
      border-radius: 1.3125rem;
      background-color: #fff;

      &:dir(rtl) {
        transform: translateX(1rem);
      }

      .gin--dark-mode & {
        background-color: var(--admin-color-border-input);
      }

      @media (prefers-reduced-motion: no-preference) {
        transition: transform 0.3s;
      }

      @media (forced-colors: active) {
        background-color: CanvasText;
      }
    }

    /* Disabled state: set cursor to not-allowed */
    &:disabled {
      cursor: not-allowed;
    }

    /* Hover state */
    &:hover {
      opacity: 0.9;
      box-shadow: 0 0 2px rgb(0, 0, 0, 0.2);
    }

    /* Hover/Focus state */
    &:active,
    &:focus {
      box-shadow:
        0 0 0 1px var(--admin-color-focus-border),
        0 0 0 4px var(--admin-color-focus);
    }

    /* Active state */
    &:checked {
      background-color: var(--admin-color-switch);

      /* @todo refactor out this specificity. Win over form--checkbox-radio.css. */
      &[class] {
        background-image: none;
      }

      &::before {
        transform: translateX(1rem);
        background-color: #fff;

        &:dir(rtl) {
          transform: translateX(-1rem);
        }

        .gin--dark-mode & {
          background-color: var(--admin-color-primary-hover);
        }

        .gin--high-contrast-mode & {
          background-color: var(--admin-color-border);
        }

        @media (forced-colors: active) {
          padding-inline-start: var(--admin-space-xs);
          background-color: LinkText !important;
        }
      }

      @media (forced-colors: active) {
        &::after {
          transform: translateX(1rem);
          mask-image: var(--admin-icon-checked);
          mask-position: 2px 2px;

          &:dir(rtl) {
            transform: translateX(-1rem);
          }
        }
      }
    }

    /* Disabled state */
    &:disabled {
      opacity: 0.75;
      background-color: var(--admin-color-text-disabled);
      box-shadow: none;

      &::before {
        opacity: 0.6;
        background-color: #fff;
      }
    }

    @media (forced-colors: active) {
      border-width: 2px;
    }

    @media (forced-colors: active) {
      &::after {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        transform: translateX(-1rem);
        background-color: Canvas;
        mask-image: var(--admin-icon-toggle-unchecked);
        mask-size: 1rem 1rem;
        mask-position: 1.0625rem 2px;
        mask-repeat: no-repeat;

        &:dir(rtl) {
          transform: translateX(1rem);
        }

        @media (prefers-reduced-motion: no-preference) {
          transition: transform 0.3s;
        }
      }
    }
  }

  label {
    position: relative;
    z-index: 1;
    padding-block-end: 0;
    padding-inline-start: var(--admin-space-2xs);
    color: var(--admin-color-text);
  }
}