signal-desktop/stylesheets/components/CircleCheckbox.scss

// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

@use '../mixins';
@use '../variables';

.CircleCheckbox {
  &__checkbox {
    position: relative;
    height: 20px;
    width: 20px;

    input {
      cursor: pointer;
      height: 0;
      position: absolute;
      width: 0;

      @include mixins.keyboard-mode {
        &:focus {
          &::before {
            border-color: variables.$color-ultramarine;
          }
          outline: none;
        }
      }

      &::before {
        @include mixins.rounded-corners;
        background: inherit;
        content: '';
        display: block;
        height: 20px;
        position: absolute;
        width: 20px;

        @include mixins.light-theme {
          border: 1.5px solid variables.$color-gray-25;
        }
        @include mixins.dark-theme {
          border: 1.5px solid variables.$color-gray-65;
        }
      }

      &:disabled {
        cursor: inherit;
      }

      @include mixins.light-theme {
        &:disabled {
          &::before {
            border-color: variables.$color-gray-15;
          }
        }
        &:disabled:checked {
          &::before {
            background: variables.$color-gray-15;
            border-color: variables.$color-gray-15;
          }
        }
      }

      @include mixins.dark-theme {
        &:disabled {
          &::before {
            border-color: variables.$color-gray-45;
          }
        }
        &:disabled:checked {
          &::before {
            background: variables.$color-gray-45;
            border-color: variables.$color-gray-45;
          }
        }
      }

      &:checked {
        &::after {
          content: '';
          display: block;
          position: absolute;
        }
      }
    }

    input[type='checkbox'] {
      &:checked {
        &:not([disabled])::before {
          background: variables.$color-ultramarine;
          border: 1.5px solid variables.$color-ultramarine;
        }

        &::after {
          @include mixins.color-svg(
            '../images/icons/v3/check/check-compact-bold.svg',
            variables.$color-white
          );
          & {
            width: 14px;
            height: 14px;
            top: 3px;
            inset-inline-start: 3px;
          }
        }
      }
    }

    input[type='radio'] {
      &:checked {
        &::before {
          border: 2px solid variables.$color-ultramarine;
        }

        &::after {
          background: variables.$color-ultramarine;
          top: 4px;
          inset-inline-start: 4px;
          width: 12px;
          height: 12px;
          border-radius: 6px;
        }
      }
    }

    &--small {
      height: 18px;
      width: 18px;

      input {
        &::before {
          height: 18px;
          width: 18px;
        }
      }

      input[type='checkbox'] {
        &:checked {
          &::before {
            background: variables.$color-ultramarine;
            border: 1.5px solid variables.$color-ultramarine;
          }

          &::after {
            border: solid variables.$color-white;
            border-width: 0 2px 2px 0;
            height: 10px;
            /* stylelint-disable-next-line liberty/use-logical-spec */
            left: 7px;
            top: 3px;
            transform: rotate(45deg);
            width: 5px;
          }
        }
      }

      input[type='radio'] {
        &:checked {
          &::before {
            border: 2px solid variables.$color-ultramarine;
          }

          &::after {
            background: variables.$color-ultramarine;
            top: 4px;
            /* stylelint-disable-next-line liberty/use-logical-spec */
            left: 4px;
            width: 10px;
            height: 10px;
            border-radius: 5px;
          }
        }
      }
    }
  }
}