@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    color-scheme: light;
    --bucket-ff: 'Inter', sans-serif;
    --bucket-bg: #ffffff;
    --bucket-p: #232326;
    --bucket-s: #fafafa;
    --bucket-p-bg: transparent;
    --bucket-pa-bg: #F4F4F5;
    --bucket-s-bg: #232326;
    --bucket-br: 6px;
    --bucket-bw: 1px;
    --bucket-bc: #D8D8D8;
    --bucket-scale: 0.96;
    --bucket-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bucket-ff: 'Inter', sans-serif;
        --bucket-bg: #09090B;
        --bucket-p: #FAFAFA;
        --bucket-s: #18181b;
        --bucket-p-bg: transparent;
        --bucket-pa-bg: #27272A;
        --bucket-s-bg: #FAFAFA;
        --bucket-br: 6px;
        --bucket-bw: 1px;
        --bucket-bc: #27272a;
        --bucket-scale: 0.96;
        --bucket-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    }
}

[data-theme=light] {
    color-scheme: light;
    --bucket-ff: 'Inter', sans-serif;
    --bucket-bg: #ffffff;
    --bucket-p: #232326;
    --bucket-s: #fafafa;
    --bucket-p-bg: transparent;
    --bucket-pa-bg: #F4F4F5;
    --bucket-s-bg: #232326;
    --bucket-br: 6px;
    --bucket-bw: 1px;
    --bucket-bc: #D8D8D8;
    --bucket-scale: 0.96;
    --bucket-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme=dark] {
    color-scheme: dark;
    --bucket-ff: 'Inter', sans-serif;
    --bucket-bg: #09090B;
    --bucket-p: #FAFAFA;
    --bucket-s: #18181b;
    --bucket-p-bg: transparent;
    --bucket-pa-bg: #27272A;
    --bucket-s-bg: #FAFAFA;
    --bucket-br: 6px;
    --bucket-bw: 1px;
    --bucket-bc: #27272a;
    --bucket-scale: 0.96;
    --bucket-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, 
body {
    font-family: var(--bucket-ff);
}

body {
    background-color: var(--bucket-bg);
    color: var(--bucket-p);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}

button,
select {
  text-transform: none;
}

a[role=button].btn,
input[type=button].btn,
input[type=submit].btn,
input[type=reset].btn,
button.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 12px 20px;
    border: none;
    border-radius: var(--bucket-br);
    outline: none;
    border: var(--bucket-bw) solid var(--bucket-s-bg);
    background-color: var(--bucket-s-bg);
    color: var(--bucket-s);
    font-family: var(--bucket-ff);
    font-weight: 500;
    font-size: 15px;
    line-height: normal;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.1s ease;
    text-align: center;
    gap: 8px;
    text-decoration: none;
    text-wrap: nowrap;
}

a[role=button].btn svg,
button.btn svg {
    height: 18px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: inherit;
}

a[role=button].btn:hover,
a[role=button].btn:active,
a[role=button].btn:focus,
input[type=button].btn:hover,
input[type=button].btn:active,
input[type=button].btn:focus,
input[type=submit].btn:hover,
input[type=submit].btn:active,
input[type=submit].btn:focus,
input[type=reset].btn:hover,
input[type=reset].btn:active,
input[type=reset].btn:focus,
button.btn:hover,
button.btn:active,
button.btn:focus {
    opacity: 0.88;
}

a[role=button].btn:active,
input[type=button].btn:active,
input[type=submit].btn:active,
input[type=reset].btn:active,
button.btn:active {
    transform: scale(var(--bucket-scale));
}

a[role=button].btn:disabled,
a[role=button].btn.disabled,
input[type=button].btn:disabled,
input[type=button].btn.disabled,
input[type=submit].btn:disabled,
input[type=submit].btn.disabled,
input[type=reset].btn:disabled,
input[type=reset].btn.disabled,
button.btn[disabled],
button.btn:disabled,
button.btn.btn-disabled {
    opacity: 0.4;
    pointer-events: none;
}

a[role=button].btn.no-animation:hover,
a[role=button].btn.no-animation:active,
a[role=button].btn.no-animation:focus,
input[type=button].btn.no-animation:hover,
input[type=button].btn.no-animation:active,
input[type=button].btn.no-animation:focus,
input[type=submit].btn.no-animation:hover,
input[type=submit].btn.no-animation:active,
input[type=submit].btn.no-animation:focus,
input[type=reset].btn.no-animation:hover,
input[type=reset].btn.no-animation:active,
input[type=reset].btn.no-animation:focus,
button.btn.no-animation:hover,
button.btn.no-animation:active,
button.btn.no-animation:focus {
    transform: scale(1);
    opacity: 1;
}

a[role=button].btn.btn-wide,
input[type=button].btn.btn-wide,
input[type=submit].btn.btn-wide,
input[type=reset].btn.btn-wide,
button.btn.btn-wide {
    width: 100%;
}

a[role=button].btn.btn-rounded,
input[type=button].btn.btn-rounded,
input[type=submit].btn.btn-rounded,
input[type=reset].btn.btn-rounded,
button.btn.btn-rounded {
    border-radius: 9999px;
}

a[role=button].btn.btn-outline,
input[type=button].btn.btn-outline,
input[type=submit].btn.btn-outline,
input[type=reset].btn.btn-outline,
button.btn.btn-outline {
    border: var(--bucket-bw) solid var(--bucket-bc);
    background-color: var(--bucket-p-bg);
    color: var(--bucket-p);
}

a[role=button].btn.btn-ghost,
input[type=button].btn.btn-ghost,
input[type=submit].btn.btn-ghost,
input[type=reset].btn.btn-ghost,
button.btn.btn-ghost {
    border: var(--bucket-bw) solid transparent;
    background-color: var(--bucket-p-bg);
    color: var(--bucket-p);
}

a[role=button].btn.btn-ghost:hover,
a[role=button].btn.btn-ghost:active,
a[role=button].btn.btn-ghost:focus,
input[type=button].btn.btn-ghost:hover,
input[type=button].btn.btn-ghost:active,
input[type=button].btn.btn-ghost:focus,
input[type=submit].btn.btn-ghost:hover,
input[type=submit].btn.btn-ghost:active,
input[type=submit].btn.btn-ghost:focus,
input[type=reset].btn.btn-ghost:hover,
input[type=reset].btn.btn-ghost:active,
input[type=reset].btn.btn-ghost:focus,
button.btn.btn-ghost:hover,
button.btn.btn-ghost:active,
button.btn.btn-ghost:focus {
    background-color: var(--bucket-pa-bg);
}

a[role=button].btn.btn-link,
input[type=button].btn.btn-link,
input[type=submit].btn.btn-link,
input[type=reset].btn.btn-link,
button.btn.btn-link {
    border: var(--bucket-bw) solid transparent;
    background-color: var(--bucket-p-bg);
    color: var(--bucket-p);
    text-decoration: underline;
}

input[type=checkbox].checkbox {
    height: 22px;
    width: 22px;
    display: inline-flex;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    -moz-appearance: none;
    appearance: none;
    user-select: none;
    border: var(--bucket-bw) solid var(--bucket-s-bg);
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
    transition: opacity 0.1s ease;
}

input[type=checkbox].checkbox:checked,
input[type=checkbox].checkbox.checked {
    background-color: var(--bucket-s-bg);
    content: var(--bucket-check-icon);
}

input[type=checkbox].checkbox:disabled,
input[type=checkbox].checkbox.disabled {
    opacity: 0.4;
    pointer-events: none;
}

input[type=checkbox].checkbox:hover,
input[type=checkbox].checkbox:active,
input[type=checkbox].checkbox:focus {
    opacity: 0.88;
}