@import '../../../../globals/variables';
@import '../../../../globals/mixins';

.check {
  cursor: pointer;
  display: inline-flex;
  outline: none;
  position: relative;

  &__box {
    align-items: center;
    background-color: $ads-tertiary-main;
    display: flex;
    height: 20px;
    justify-content: center;
    transition: all 0.15s ease-out;
    width: 20px;

    &--square {
      border: 2px solid;
      border-radius: 3px;
    }

    &--circle {
      border: 2px solid;
      border-radius: 50%;
    }
  }

  &__input {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;

    &:focus-visible + .check__box {
      box-shadow: 0 0 0 3px rgb(99 102 241 / 30%);
    }
  }

  &:active:not(.disabled) {
    .check__box {
      box-shadow:
        0 0 0 2px rgb(99 102 241 / 30%),
        0 0 10px rgb(99 102 241 / 20%);
      filter: brightness(1.1);
    }
  }

  &.disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  &__box--default {
    border-color: $ads-text-secondary;
  }

  &__box--success {
    border-color: $ads-primary-main;
  }

  &__box--info {
    border-color: $ads-secondary-main;
  }

  &__box--warning {
    border-color: $ads-warning-main;
  }

  &__box--danger {
    border-color: $ads-danger-main;
  }

  &__mark {
    color: $ads-text-main; // Replaced currentcolor with text color variable
    height: 12px;
    width: 12px;

    &--circle {
      height: 10px;
      width: 10px;
    }
  }

  .check__input:checked + .check__box {
    background-color: $ads-primary-main; // Replaced currentcolor with primary color

    .check__mark {
      color: $ads-color-main;
    }
  }

  .check__input:checked + .check__box--default {
    background-color: $ads-text-secondary; // Added specific background color
    color: $ads-text-secondary;
  }

  .check__input:checked + .check__box--success {
    background-color: $ads-primary-main;
    color: $ads-primary-main;
  }

  .check__input:checked + .check__box--info {
    background-color: $ads-secondary-main;
    color: $ads-secondary-main;
  }

  .check__input:checked + .check__box--warning {
    background-color: $ads-warning-main;
    color: $ads-warning-main;
  }

  .check__input:checked + .check__box--danger {
    background-color: $ads-danger-main;
    color: $ads-danger-main;
  }

  .check__input:disabled + .check__box {
    background-color: $ads-background-main;
    border-color: $ads-text-input;
  }
}
