@import '../../assets/scss/index';

.a-checkbox {
    $this:&;
    display: inline-block;
    cursor: pointer;
	position: relative;
    padding:5px 0;

	&__input {
		position: absolute;
        height:1px;
        width:1px;
        overflow:hidden;
        opacity: 0;
        pointer-events: none;
    }
    &__checkbox{
        display: inline-block;
        vertical-align: middle;
        width:22px;
        height:22px;
        border-radius: 50%;
        transition: $basic-transition;
        position: relative;
        &::before{
            content:'';
            position:absolute;
            display: block;
            top:0;
            bottom:0;
            left:0;
            right:0;
            border-radius:50%;
            border:1px solid $color-medium-gray;
            transition: $basic-transition;
        }
    }
    &__input:checked ~ #{$this}__checkbox{
        background: $color-primary;
        &::before{
            border-color: $color-black;
            transform: scale(1.5);
        }
    }
    &--color #{$this}__checkbox{
        background: var(--swatch-color);
        &::before{
            border-color: $color-black;
            opacity: 0;
        }
    }
    &--color #{$this}__input:checked ~ #{$this}__checkbox{
        background: var(--swatch-color);
        &::before{
            opacity: 1;
        }
    }
    &--white #{$this}__checkbox{
        border: 1px solid $color-medium-gray;
    }

    &__label{
        @include fontSize(14px, 14px, 14px);
        font-family: $futura-book;
        margin-left: 5px;
        vertical-align: middle;
    }
    &__input:checked ~ #{$this}__label{
        font-family: $futura-bold;
    }
    &:hover #{$this}__label, &__input:focus ~ #{$this}__label{
        text-decoration: underline;
    }
}