$eve-checkbox-size: 1.125rem;

.eve-checkbox {
    align-items: center;
    display: inline-flex;
    position: relative;
    vertical-align: middle;

    input {
        &[type='checkbox'] {
            cursor: pointer;
            height: $eve-checkbox-size;
            left: 0;
            margin: 0;
            opacity: 0;
            padding: 0;
            position: absolute;
            width: $eve-checkbox-size;

            &:checked ~ i {
                background: $eve-color-green;
                border-color: $eve-color-green;

                &::after {
                    border-bottom: .125rem solid $eve-color-white;
                    border-right: .125rem solid $eve-color-white;
                    content: '';
                    display: block;
                    height: calc(100% - #{$eve-checkbox-size / 4});
                    left: 50%;
                    position: absolute;
                    top: calc(50% - .125rem);
                    transform: translate(-50%, -50%) rotate(45deg);
                    width: calc(100% - #{$eve-checkbox-size / 2});
                    box-sizing: content-box; // TODO: Remove this later
                }
            }

            &:disabled {
                pointer-events: none;

                & ~ i {
                    opacity: .5;
                }
            }
        }
    }

    i {
        background: $eve-color-white;
        border: .125rem solid $eve-color-darker-silver;
        flex-shrink: 0;
        height: $eve-checkbox-size;
        pointer-events: none;
        position: relative;
        width: $eve-checkbox-size;
    }
}