:root {
    --download-button-outline-color: var(--sub-content-outline-color);
    --download-button-background-color: var(--sub-content-background-color);
    --download-button-hover-background-color: var(--sub-content-outline-color);
    --download-button-height: var(--node-height);

    --connection-overlay-font-size: var(--label-font-size);
    --connection-overlay-color: var(--default-color);
    --connection-overlay-background-color: var(--container-background-color);
    --connection-overlay-background-hover-color: var(--container-outline-color);
    --connection-overlay-outline-color: var(--container-outline-color);
    --connection-overlay-error-background-color: var(--lucency-reddish);
    --connection-overlay-error-background-hover-color: var(--lucency-red);
}

.logger-div {
    display: flex;
    flex-direction: column;
}

.log-text {
    white-space: pre-line;
    word-break: break-word;
}

.download-button {
    font-size: medium;
    height: var(--download-button-height);
    text-align: center;
    width: 100%;
    border-radius: var(--radius);
    margin: 20px auto;
    user-select: none;
    border: none;
    outline: var(--border-width) solid var(--download-button-outline-color);
    background-color: var(--download-button-background-color);
    cursor: pointer;
}

.download-button:hover {
    background-color: var(--download-button-hover-background-color);
}

.connection-overlay {
    position: relative;
    top: auto;
    left: auto;
    font-size: var(--connection-overlay-font-size);
    user-select: none;
    word-wrap: break-word;
    white-space: nowrap;
    text-align: center;
    color: var(--connection-overlay-color);
    border-radius: var(--radius);
    background-color: var(--connection-overlay-background-color);
    outline: var(--border-width) solid var(--connection-overlay-outline-color);
    backdrop-filter: var(--blur);
    padding: var(--margin);
}

.connection-overlay:hover {
    background-color: var(--connection-overlay-background-hover-color);
}

.connection-overlay-error {
    position: relative;
    top: auto;
    left: auto;
    font-size: var(--connection-overlay-font-size);
    user-select: none;
    word-wrap: break-word;
    white-space: nowrap;
    text-align: center;
    color: var(--connection-overlay-color);
    border-radius: var(--radius);
    background-color: var(--connection-overlay-error-background-color);
    outline: var(--border-width) solid var(--connection-overlay-outline-color);
    backdrop-filter: var(--blur);
    padding: var(--margin);
    cursor: pointer;
}

.connection-overlay-error:hover {
    background-color: var(--connection-overlay-error-background-hover-color);
}