@use "variables" as *;

.binary-field__editor-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    flex: 1;
    width: 100%;
    gap: $spacing-1;
}

.binary-field__code-editor {
    border: 1px solid $color-palette-gray-400; // Input
    display: block;
    flex-grow: 1;
    width: 100%;
    min-height: 20rem;
    border-radius: $border-radius-md;
    overflow: auto;
}

.binary-field__code-editor--disabled {
    background-color: $color-palette-gray-200;
    opacity: 0.5;

    &::ng-deep {
        .monaco-mouse-cursor-text,
        .overflow-guard {
            cursor: not-allowed;
        }
    }
}

.editor-mode__form {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.editor-mode__input-container {
    width: 100%;
    display: flex;
    gap: $spacing-1;
    flex-direction: column;
}

.editor-mode__input {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.editor-mode__actions {
    width: 100%;
    display: flex;
    gap: $spacing-1;
    align-items: center;
    justify-content: flex-end;
}

.editor-mode__helper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: $spacing-1;
    color: $color-palette-gray-700;
    font-weight: $font-size-sm;
    visibility: hidden;
}

.editor-mode__helper--visible {
    visibility: visible;
}

.error-message {
    min-height: $spacing-4; // Fix height to avoid jumping
    justify-content: flex-start;
    display: flex;
}
