checkbox-icon-size = 40px;
$checkbox-icon-px-size = 20PX;

.at-checkbox {
    background-color: $color-bg;

    &__option_wrap {
        padding: $spacing-v-lg $spacing-h-xl $spacing-v-lg 0;
    }

    &__option_container {
        display: flex;
    }

    &__title {
        display: inline-flex;
        font-size: $font-size-lg;
        line-height: $line-height-zh;
        text-align: left;
    }

    &__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: $spacing-h-lg;
        width: $checkbox-icon-px-size;
        height: $checkbox-icon-px-size;
        font-size: $font-size-lg;
        line-height: 0;
        border: 2px solid $color-brand;
        border-radius: $border-radius-circle;
        background-color: $color-bg;
        box-sizing: border-box;
        transition: all 0.2s;

        &--selected {
            background-color: $color-brand;
            border: none;
        }
    }

    &__icon_container {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: $checkbox-icon-px-size;
        height: $checkbox-icon-px-size;
    }

    &__desc {
        display: block;
        padding-left: $checkbox-icon-size + $spacing-h-lg;
        color: $color-grey-2;
        font-size: $font-size-sm;
        text-align: left;
        line-height: $line-height-zh;
        letter-spacing: 0;
    }

    &__option {
        padding-left: $spacing-h-xl;
        @include active;
        &--disabled {
            .at-checkbox__option_container, .at-checkbox__desc {
                opacity: $opacity-disabled;
            }

            &:active {
                background-color: $color-bg;
            }
        }
    }

    &__option + &__option {
        .at-checkbox__option_wrap {
        }
    }
}