/***** Global variables *****/
:root {
    --fx-border-color-focus: #0096D6;
    --fx-textfield-background: white;
    --fx-button-background: linear-gradient(180deg, white, #e0e0e0);
}

::placeholder {
    color: #888;
}

fx-button > fx-background {
    background: var(--fx-button-background);
    border-radius: var(--fx-border-radius);
}

fx-button > fx-border, fx-textfield > fx-border, textarea {
    border-color: var(--fx-border-color);
    border-style: var(--fx-border-style);
    border-width: var(--fx-border-width);
    border-radius: var(--fx-border-radius);
}

fx-textfield:focus-within > fx-border, textarea:focus {
    border-color: var(--fx-border-color-focus);
    outline: none !important;
}

textarea {
    padding: 8px;
    box-sizing: border-box;
}

fx-hyperlink fx-text:hover {
    text-decoration: underline;
}

fx-textfield > fx-background {
    background: var(--fx-textfield-background);
    border-radius: var(--fx-border-radius);
}

/* Removing borders, outlines and background for input elements (to not interfere with the above) */
input[type="text"], input[type="password"] {
    border: none;
    outline: none;
    background-color: transparent;
}

/* Cross for the tab close button */
.tab-close-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23444' stroke-width='2' stroke-linejoin='round' viewBox=\'0 0 16 16\'%3E%3Cpath d=\'M 4,4 L 12,12 Z M 4,12 L 12,4 Z\'/%3E%3C/svg%3E");
}
