:host {
    .extra_options_checkbox {
        width: 100%;
        display: block;
        overflow: hidden;
        display: flex;
        align-items: center;

        .extra_options_label {
            width: 70%;
            float: left;
            font-size: 14px;

            label {
                margin: 5px;
                font-weight: normal;
            }
        }

        .extra_options_value {
            width: 30%;
            float: left;

            .woofood-cbx-wrapper {
                width: 100%;
                float: left;

                .woofood-cbx {
                    margin: auto;
                    -webkit-user-select: none;
                    user-select: none;
                    cursor: pointer;
                    line-height: 30px;
                    margin-bottom: 0px;

                    span:first-child {
                        display: inline-block;
                        position: relative;
                        width: 18px;
                        height: 18px;
                        margin-right: 8px;
                        border-radius: 3px;
                        transform: scale(1);
                        vertical-align: middle;
                        border: 1px solid #9098A9;
                        transition: all 0.2s ease;

                        &::before {
                            content: "";
                            width: 100%;
                            height: 100%;
                            background: #cc0000;
                            display: block;
                            transform: scale(0);
                            opacity: 1;
                            border-radius: 50%;
                        }

                        svg {
                            position: absolute;
                            top: 3px;
                            left: 2px;
                            fill: none;
                            stroke: #FFFFFF;
                            stroke-width: 2;
                            stroke-linecap: round;
                            stroke-linejoin: round;
                            stroke-dasharray: 16px;
                            stroke-dashoffset: 16px;
                        }
                    }
                }
            }
        }

        .inp-woofood-cbx:checked+.woofood-cbx span:first-child {
            background: #cc0000;
            border-color: #cc0000;
            animation: wave 0.4s ease;
            svg {
                stroke-dashoffset: 0 !important;
            }
        }
        
        .inp-woofood-cbx:disabled+.woofood-cbx span:first-child  {
            border-color: #dfdfdf !important;
        }
    }

    .validator-text {
        color: #cc0000;
        font-size: 12px;
    }
}