.binary-code-translator__content {
    display: grid;
    gap: var(--tool-gap);
}

.binary-code-translator__panel {
    width: 100%;
}

.binary-code-translator__form,
.binary-code-translator__settings,
.binary-code-translator__fields {
    display: grid;
    gap: var(--tool-gap);
}

.binary-code-translator__form {
    grid-template-columns: 1fr;
}

.binary-code-translator__settings {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: end;
}

.binary-code-translator__direction {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: end;
}

.binary-code-translator__swap {
    width: 2.75rem;
    min-width: 2.75rem;
    padding-inline: 0;
}

.binary-code-translator__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.binary-code-translator__field {
    align-content: start;
}

.binary-code-translator__field textarea {
    min-height: 16rem;
    resize: vertical;
    line-height: 1.5;
}

.binary-code-translator__field textarea[readonly] {
    background: var(--color-surface-muted);
}

.binary-code-translator__actions {
    justify-content: flex-end;
}

.binary-code-translator__panel > .tool-status {
    margin: 1rem 0 0;
}

@media (max-width: 48rem) {
    .binary-code-translator__settings,
    .binary-code-translator__fields {
        grid-template-columns: 1fr;
    }

    .binary-code-translator__field textarea {
        min-height: 12rem;
    }

    .binary-code-translator__actions {
        justify-content: stretch;
    }
}

@media (max-width: 30rem) {
    .binary-code-translator__direction {
        grid-template-columns: 1fr;
    }

    .binary-code-translator__swap {
        justify-self: start;
    }
}