@import '../../styles/variables';

.metadata-instance-editor {
    .collapsible-card-content {
        position: relative;
    }
}

.metadata-instance-editor-instance-title {
    display: flex;
    align-items: center;
}

.metadata-instance-editor-instance-title-text {
    margin: 0 10px;
    color: $black;

    &.metadata-instance-editor-instance-has-error {
        color: $bdl-watermelon-red;
    }
}

.btn-plain.metadata-instance-editor-instance-edit {
    position: absolute;
    top: 8px;
    right: 25px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 3px;

    &:hover svg path {
        fill: $bdl-gray;
    }

    &.metadata-instance-editor-instance-is-editing {
        background-color: $bdl-gray-10;
    }
}