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

.a-toggle{
    display: inline-block;
    cursor: pointer;
    position: relative;

    &__input{
        position: absolute;
        opacity: 0;
        width:1px;
        height:1px;
        overflow:hidden;
        pointer-events: none;
    }

    &__toggle{
        display: inline-block;
        vertical-align: middle;
        width:32px;
        height:18px;
        border:1px solid $color-primary;
        border-radius: 18px;
        padding:1px;

        &::before{
            content: '';
            display: block;
            width:14px;
            height: 14px;
            border-radius: 50%;
            background: $color-primary;
            transition: $quick-transition;
        }
    }
    &__input:checked ~ &__toggle::before{
        transform: translateX(100%);
    }

    &__label{
        @include fontSize(14px, 14px, 16px);
        letter-spacing: 1px;
        font-family: $futura-book;
        margin-left:3px;
        vertical-align: middle;
    }

    &:hover &__label, &__input:focus ~ &__label{
        text-decoration: underline;
    }
}