$border: var(--control-border-width) solid var(--color-control-bg-border-default);
$border-r: var(--control-radius);

.ce-inline-toolbar,
.ce-popover,
.ce-conversion-toolbar,
.cdx-input {
    color: var(--color-typo-primary);
    background: var(--color-bg-default);
    border: $border;
    border-radius: $border-r;
}

//=================== block ====================
.ce-block {
    &--selected {
        .ce-block__content {
            background-color: transparent;
        }
    }
    &__content {
        @media (min-width: 651px) {
            margin: 0 0 0 var(--space-4xl);
            max-width: 100%;
        }
    }
}

//=================== conversion-toolbar ====================

.ce-conversion-toolbar {
    &__label {
        color: var(--color-typo-primary);
    }
}

.ce-conversion-tool {
    &:hover {
        background-color: var(--color-control-bg-clear-hover);
        .ce-conversion-tool__icon {
            border-color: var(--color-control-bg-border-default-hover);
        }
    }
}

// ================ export ================

.cdx-block {
    padding: var(--space-2xs) 0;
}

.cdx-settings-button {
    color: var(--color-typo-primary);
    border-radius: $border-r;
    background-color: var(--color-control-bg-clear);
    &:hover {
        background-color: var(--color-control-bg-clear-hover);
    }
}

//================ inline-toolbar ================
.ce-inline-toolbar {
    padding: var(--space-3xs);

    &__dropdown {
        border: none;
        border-radius: $border-r !important;
        &:hover {
            background: var(--color-control-bg-clear-hover);
        }
    }
}

.ce-inline-tool {
    padding: var(--space-3xs);
    border-radius: $border-r !important;

    &:hover {
        background: var(--color-control-bg-clear-hover);
    }

    &--active {
        color: var(--color-control-typo-secondary);
    }

    &--focused {
        background: transparent !important;
        box-shadow: none;
    }

    &-input {
        color: var(--color-typo-primary);
        background: var(--color-bg-default);
        border-top: $border;

        &::placeholder {
            color: var(--color-control-typo-placeholder);
        }
    }
}

// =========== input ===========
.cdx-search-field {
    --icon-margin-right: 10px;

    border-radius: 6px;
    padding: 2px;

    background: transparent;
    border: $border;
    transition: border-color 0.2s ease;

    &:hover {
        border-color: var(--color-control-bg-border-default-hover);
    }
    &__input {
        color: inherit;
        &::placeholder {
            color: var(--color-control-typo-placeholder);
        }
    }
}

// ============ popover ===========
.ce-popover {
    padding: var(--space-s) var(--space-m);
    &__item {
        &:hover:not(.ce-popover__item--no-visible-hover) {
            background-color: var(--color-control-bg-clear-hover);
            .ce-popover__item-icon {
                border-color: var(--color-control-bg-border-default-hover);
            }
        }
        &-item {
            background-color: inherit;
        }
        &-icon {
            background-color: transparent;
            box-shadow: none;
            border: var(--control-border-width) solid var(--color-control-bg-border-default);
            border-radius: var(--control-radius);
            transition: border-color 0.2s ease;
        }
        &--confirmation {
            background-color: var(--color-bg-alert);

            .ce-popover__item-icon {
                color: #ffffff;
            }

            &:not(.ce-popover-item--no-hover) {
                &:hover {
                    .ce-popover__item-icon,
                    .ce-popover__item-label {
                        color: var(--color-control-typo-secondary-hover);
                    }
                }
            }
            &:not(.ce-popover-item--no-focus) {
                &.ce-popover-item--focused {
                    background: var(--color-background-item-confirm-hover) !important;
                }
            }
        }

        &--active {
            background-color: transparent;
            color: var(--color-control-typo-secondary);
        }
    }

    &__nothing-found-message {
        color: var(--color-control-typo-placeholder);
    }
}

// ============ toolbar ===========
.ce-toolbar {
    &__content {
        @media (min-width: 651px) {
            margin: 0 0 0 var(--space-4xl);
            max-width: 100%;
        }
    }
    &__plus,
    &__settings-btn {
        color: var(--color-typo-primary);
        background-color: var(--color-control-bg-default);
        border-radius: $border-r;
        border: var(--control-border-width) solid transparent;

        &:hover {
            background-color: var(--color-control-bg-default);
            border-color: var(--color-control-bg-border-default);
        }

        &--active {
            background-color: var(--color-control-bg-default);
            border-color: var(--color-control-bg-border-default-hover);
        }
    }

    &__actions {
        color: var(--color-typo-primary);
        border-radius: $border-r;
    }
}

.codex-editor--narrow .codex-editor__redactor {
    margin-right: 0;
}

.codex-editor--narrow .ce-toolbar__actions {
    @media (min-width: 651px) {
        right: 100%;
    }
}

// ============ common styles =============
.ce-conversion-tool--focused,
.ce-popover__item--active {
    background: transparent !important;
    box-shadow: none;
    color: var(--color-control-typo-secondary);
}

.ce-popover__item-icon,
.ce-conversion-tool__icon {
    background-color: transparent;
    box-shadow: none;
    border: $border;
    border-radius: $border-r;
    transition: border-color 0.2s ease;
}

.cdx-notifies {
    z-index: 10;
    .cdx-notify {
        &__cross {
            right: 15px;
        }
    }
}
