:root {
    --bottom-position-reference: 0;
    --floating-button-bottom-position: 1;
    --globals-arrow-disabled-fill: var(--colors-on-inactive-100);
    --globals-body-bg: var(--colors-background-100);
    --globals-focus-outline-color: var(--colors-accent-100);
    --globals-font-family: Source Sans Pro;
    --globals-font-size: 1rem;
    --globals-scrollbar-bg: var(--colors-background-100);
    --globals-scrollbar-thumb-bg: var(--colors-on-surface-40);
}

html{
    font-size: var(--globals-font-size);
}
body {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    margin: 0;
    font-family: var(--globals-font-family);
    background: var(--globals-body-bg) !important;

    &::-webkit-scrollbar {
        width: 7px;
        border-radius: var(--radius-4xl);
        background-color: var(--globals-scrollbar-bg);
    }
    &::-webkit-scrollbar-thumb {
        background-color: var(--globals-scrollbar-thumb-bg);
        border-radius: var(--radius-4xl);
    }
}

a {
    text-decoration: none;
}

.arrow-disabled > div > svg{
    fill: var(--globals-arrow-disabled-fill);
}

textarea,
input,
input.text,
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="button"],
input[type="submit"],
input[type="checkbox"],
button,
.input-checkbox {
  -webkit-appearance: none;
  font-family: var(--globals-font-family);
}

:focus{
    outline: var(--globals-focus-outline-color);
}