@import 'functions';
@import 'variables';

// VARIABLES
$uncheckedColor: #d4d4d9;

.checkbox-container {
  display: inline-block;

  input {
    &[type='checkbox'] {
      display: none;
    }

    &:checked {
      + label {
        .unchecked {
          display: none;
        }

        .checked {
          display: flex;
        }
      }
    }
  }

  label {
    border-radius: 50%;
    display: block;
    height: 22px;
    overflow: hidden;
    user-select: none;
    width: 22px;

    .unchecked {
      border: 2px solid $uncheckedColor;
      border-radius: 50%;
      display: block;
      height: 100%;
      width: 100%;
    }

    .checked {
      align-items: center;
      background-color: $tf-theme-color;
      border: 2px solid transparent;
      border-radius: 50%;
      display: none;
      height: 100%;
      justify-content: center;
      padding: 3px;
      text-align: center;
      width: 100%;
    }
  }
}