.base64-encoder__content {
    display: grid;
    gap: var(--tool-gap);
}

.base64-encoder__panel {
    width: 100%;
}

.base64-encoder__form {
    grid-template-columns: 1fr;
    align-items: stretch;
}

.base64-encoder__mode {
    max-width: 20rem;
}

.base64-encoder__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tool-gap);
    align-items: stretch;
}

.base64-encoder__field {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.base64-encoder__hint {
    margin: -0.1rem 0 0;
    line-height: 1.5;
}

.base64-encoder__field textarea {
    flex: 1 1 auto;
    min-height: 16rem;
    resize: vertical;
    line-height: 1.5;
}

.base64-encoder__field textarea[readonly] {
    background: var(--color-surface-muted);
}

.base64-encoder__actions {
    grid-column: 1 / -1;
}

.base64-encoder__panel > .tool-status {
    margin: 1rem 0 0;
}

@media (min-width: 48.0625rem) {
    @supports (grid-template-rows: subgrid) {
        .base64-encoder__fields {
            grid-template-rows: auto auto minmax(16rem, auto);
        }

        .base64-encoder__field {
            display: grid;
            grid-row: span 3;
            grid-template-rows: subgrid;
        }

        .base64-encoder__field > .tool-label {
            grid-row: 1;
        }

        .base64-encoder__field > .base64-encoder__hint {
            grid-row: 2;
        }

        .base64-encoder__field > textarea {
            grid-row: 3;
            height: 100%;
            min-height: 0;
        }
    }
}

@media (max-width: 48rem) {
    .base64-encoder__fields {
        grid-template-columns: 1fr;
    }

    .base64-encoder__field textarea {
        min-height: 12rem;
    }
}

@media (max-width: 30rem) {
    .base64-encoder__actions {
        grid-auto-flow: row;
        grid-auto-columns: 1fr;
    }

    .base64-encoder__actions .btn {
        width: 100%;
    }
}