@import "mixins";

.itsec-chip-control {
    position: relative;

    input {
        opacity: 0;
        position: absolute;
        width: 100%;
        height: 100%;
    }

    label {
        display: inline-flex;
        align-items: center;
        color: $main-blue;
        background: $white;
        border: 1px solid $main-blue;
        border-radius: 12px;
        padding: 2px 8px;

        &:after {
            @include dashicon('\f543');
            color: $white;
            background: $main-blue;
            margin-left: 4px;
            margin-right: -5px;
            border-radius: 10px;
        }
    }

    input:checked + label {
        color: white;
        background: $main-blue;
        border-color: transparent;

        &:after {
            content: '\f335';
            color: $main-blue;
            background: $white;
        }
    }

    input:focus + label {
        box-shadow: inset 0 0 0 1px $white, 0 0 0 2px var(--wp-admin-theme-color);
        outline: 3px solid transparent;
        border-color: $white;
    }
}