/**
 * All of the CSS for your admin-specific functionality should be
 * included in this file.
 */
@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100";
:root {
    --cf-purple: #6C63FF;
    --tabs-color-hover: #ffffff;
}

.cf-container .cf-container__tabs--tabbed-horizontal {
    padding-bottom: 12px;
}

.cf-container .cf-container__tabs {
    background-color: #f2f2f2;
}

.cf-container__tabs-list .cf-container__tabs-item {
    border-radius: 15px;
    margin-bottom: 6px !important;
}

.cf-container .cf-container__tabs-list .cf-container__tabs-item--current,
.cf-container .cf-container__tabs-list .cf-container__tabs-item:hover {
    background-color: var(--cf-purple);
}

.cf-container .cf-container__tabs-list .cf-container__tabs-item button {
    justify-content: space-between;
    font-size: 16px;
    padding-left: 30px;
    padding-right: 30px;
}

.cf-container .cf-container__tabs-list .cf-container__tabs-item button span {
    margin-left: 10px;
}

.cf-container .cf-container__tabs-list .cf-container__tabs-item--current button,
.cf-container .cf-container__tabs-list .cf-container__tabs-item:hover button {
    color: var(--tabs-color-hover);
}

#toplevel_page_crb_carbon_fields_container_fsd-sb {
    .wp-menu-image:before {
        content: "\f11a";
    }
}

#carbon_fields_container_fsd-sb {


    .cf-container {
        flex-direction: row;
        .cf-container__tabs-list {
            flex-direction: column;
            .cf-container__tabs-item {
                margin-right: 0;
            }
        }
        .cf-container__fields {
            .crb-author-name {
                border: 1px solid red;
            }
            .cf-field {
                /*padding-left: 0;*/
            }
            .cf-color {
                .cf-color__inner {
                    .cf-color__reset {
                        display: none;
                    }
                }
            }
        }
    }

}

/* Right text */
.cf-rich-text iframe {
    height: 200px !important;
}
/* /end Right text */

/* Field px */
.field-px {
    .cf-field__body {
        display: flex;
        align-items: flex-end;

        &::after {
            display: inline-block;
            margin-left: 5px;
            content: 'px';
        }
    }
}
/* /end Field px */

/* Field checkbox */
.field-checkbox input {
    appearance: none;
    background-color: #dfe1e4;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 30px;
    margin: 0 10px 0 0;
    position: relative;
    width: 60px;
    cursor: pointer;
}

.field-checkbox label {
    cursor: pointer;
    font-size: 16px;
}

.field-checkbox input::before {
    bottom: -6px;
    content: "" !important;
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
    cursor: pointer;
}

.field-checkbox input,
.field-checkbox input::after {
    transition: all 100ms ease-out;
    cursor: pointer;
}

.field-checkbox input::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 20px;
    left: 5px;
    position: absolute;
    top: 5px;
    width: 20px;
}

.field-checkbox input[type=checkbox] {
    cursor: default;
}

.field-checkbox input:hover {
    background-color: #c9cbcd;
    transition-duration: 0s;
}

.field-checkbox input:checked {
    background-color: var(--cf-purple);
}

.field-checkbox input:checked::after {
    background-color: #fff;
    left: 35px;
}

.field-checkbox :focus:not(.focus-visible) {
    outline: 0;
}

.field-checkbox input:checked:hover {
    background-color: var(--cf-purple);
}
/* /end Field checkbox */

/* Input */
.cf-container .cf-text__input {
    /*border-color: var(--cf-purple);*/
}
/* /end Select */

/* Select */
.wp-core-ui select.cf-select__input {
    /*border-color: var(--cf-purple);*/
}
/* /end Select */

/* Toggle color */
.cf-container .cf-color__toggle {
    /*border-color: var(--cf-purple);*/
}
/* /end Toggle color */