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%;
}

textarea {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background-color: transparent;
    scrollbar-width: none;
    scrollbar-color: #000000ff #00000000;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
    field-sizing: fixed;
    color: var(--colors-text);
    caret-color: var(--colors-text);
    cursor: text;
    user-select: text;
    resize: none;
    overflow: auto;
}

@media (hover: hover) and (pointer: fine) {
    .textarea:hover {
        background-color: #00000000;
    }
}

textarea:active {
    outline: 0;
    box-shadow: none;
}

textarea:focus {
    outline: 0;
    box-shadow: none;
}

textarea:focus-visible {
    outline: 0;
    box-shadow: none;
}

textarea::placeholder {
    color: var(--colors-selected);
    opacity: 1;
}

textarea::selection {
    color: inherit;
    background: var(--colors-primary);
}

.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;
}

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

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

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

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

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

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