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

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

.Checkbox {
  &__container {
    align-items: center;
    display: flex;

    input {
      height: 18px;
      width: 18px;

      @include mixins.mouse-mode {
        &:focus,
        &:active {
          outline: none;
        }
      }

      @include mixins.keyboard-mode {
        &:focus,
        &:active {
          outline: 1px solid variables.$color-ultramarine;
        }
      }
    }
  }

  &__checkbox {
    height: 18px;
    margin-inline-end: 20px;
    width: 18px;
  }

  &__description {
    @include mixins.font-subtitle;
    @include mixins.light-theme {
      color: variables.$color-gray-60;
    }
    @include mixins.dark-theme {
      color: variables.$color-gray-25;
    }
  }
}