html {
    font-family: 'JetBrains Mono', monospace;
}

body {
    background-color: var(--colors-background);
    color: var(--colors-text);
}

code {
    display: inline-block;
    width: fit-content;
    height: fit-content;
    padding: 0;
    margin: 0;
    background-color: var(--colors-selected);
    border-radius: 8px;
    white-space: pre;
    vertical-align: middle;
    overflow-x: auto;
    max-width: 100%;
    box-sizing: border-box;
}

code.block {
    padding: 8px;
    margin: 0;
    width: 100%;
}

.Clickable {
    cursor: pointer;
    user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    .Clickable:hover {
        background-color: var(--colors-focused);
    }
}

.Clickable:active {
    background-color: var(--colors-pressed);
}

.ColorsSwitch {
    padding: 8px 16px;
    border-radius: 8px;
}

.ModuleTitle {
    display: block;
    font-weight: 700;
    padding: 0 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.BaseEncodings {
    padding: 16px;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.BaseEncodings > * {
    flex-shrink: 0;
}

.BaseEncoding {
    padding: 8px 16px;
    border-radius: 8px;
}

.BaseEncoding.selected {
    background-color: var(--colors-selected);
    color: var(--colors-primary);
    cursor: auto;
}

.TextInput {
    padding: 8px 16px;
    border-radius: 8px;
    background-color: var(--colors-textfield);
}

.BaseEncoded {
    height: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-height: calc(1lh + 16px);
    max-height: calc(10lh + 16px);
    overflow-y: auto;
}

.CopyButton {
    padding: 8px 16px;
    border-radius: 8px;
}