.EditableMetadata {
    &-container {
        display: flex;
        gap: var(--padding-medium-large);
        align-items: center;
        justify-content: space-between;
        height: 30px;
        width: 100%;
    }

    &-read-input {
        cursor: text;
    }

    &-edit-input {
        height: 30px;
        padding-left: 8px;
    }

    &-edit-button {
        margin-left: 8px;
        opacity: 0;
        transition: opacity 0.15s ease;
        display: flex;
        justify-content: center;
    }

    &-container:hover &-edit-button {
        opacity: 1;
    }

    &-value {
        display: flex;
        align-items: center;
    }

    &-actions {
        display: flex;
        gap: var(--padding-medium);
        align-items: center;
    }

    &-processing {
        margin-left: 12px;
        cursor: help;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
        transition: opacity 0.3s ease-out;

        &.fade-out {
            opacity: 0;
        }

        span {
            font-size: 14px;
            display: inline-block;
        }

        .CheckGlyphIcon {
            color: var(--glyphs-success);
            cursor: default;
        }

        .LoadingSpinner {
            display: flex;
            align-items: center;
        }
    }
}

// stylelint-disable selector-id-pattern
.edit-tooltip-error-tooltip-message {
    .tooltip-inner {
        // @include box-shadow-dropdown;
        box-shadow: 0 0 5px 0 rgba(28 28 28 / 15%);
        color: var(--text-error);
        background-color: #fff;
    }
}