:root {
    --icon-size: 30px;
    --cursor-type: pointer;
    --danger-color: var(--danger);
    --success-color: var(--success);
    --secondary-color: var(--secondary);
}

/* Common properties between the icons */
.used-video-checkbox + label .fa-video,
.used-video-checkbox + label .fa-video-slash {
    font-size: var(--icon-size);
    cursor: var(--cursor-type);
}

.used-video-icon {
    padding-top: inherit;
}

/* Hide the 'fa-video' icon by default and when it's disabled */
.used-video-checkbox:not(:disabled) + label .fa-video,
.used-video-checkbox:disabled + label .fa-video {
    display: none;
}

/* Show the 'fa-video-slash' icon and set its color */
.used-video-checkbox:not(:disabled) + label .fa-video-slash,
.used-video-checkbox:disabled + label .fa-video-slash,
.used-video-checkbox:disabled:checked + label .fa-video {
    display: inline-block;
    color: var(--danger-color);
}

/* Show the 'fa-video' icon and set its color when the checkbox is checked */
.used-video-checkbox:not(:disabled):checked + label .fa-video {
    display: inline-block;
    color: var(--success-color);
}

/* Hide the 'fa-video-slash' icon when the checkbox is checked */
.used-video-checkbox:checked + label .fa-video-slash {
    display: none;
}

/* Set the 'fa-video-slash' and 'fa-video' icon color to secondary when the checkbox is disabled */
.used-video-checkbox:disabled + label .fa-video-slash,
.used-video-checkbox:disabled:checked + label .fa-video {
    color: var(--secondary-color);
    cursor: default;
}