@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@100..900&family=Lexend:wght@100..900&display=swap');

.nb-font {
    font-family: 'Lexend', sans-serif, system-ui;
    font-optical-sizing: auto;
}

.nb-font-large {
    font-family: 'Lexend Mega', sans-serif, system-ui;
    font-optical-sizing: auto;
}

.nb-border {
    border: 2px solid #000;
    border-radius: 0.25rem;
}

.nb-border-lg {
    border: 3px solid #000;
    border-radius: 0.375rem;
}

.nb-border-xl {
    border: 4px solid #000;
    border-radius: 0.5rem;
}

.nb-shadow {
    box-shadow: 0 0 #000, 0 0 #000, 2px 2px 0px 0px #000;
}

.nb-shadow-lg {
    box-shadow: 0 0 #000, 0 0 #000, 4px 4px 0px 0px #000;
}

.nb-shadow-xl {
    box-shadow: 0 0 #000, 0 0 #000, 6px 6px 0px 0px #000;
}

.nb-link {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.nb-link-lg {
    text-decoration-line: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 6px;
}

.nb-input {
    padding: 0.125rem 0.25rem;
    outline: transparent;
}

.nb-hover:hover {
    box-shadow: unset;
    transform: translate(4px, 4px);
}

.nb-checkbox {
    appearance: none;
    &::before {
        content: '';
        transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid #000;
        border-radius: 0.25rem;
        background-color: #fff;
    }
    &:checked::before {
        background-color: #000;
    }
}

.nb-checkbox:not(:checked):hover::before {
    box-shadow: 0 0 #000, 0 0 #000, 2px 2px 0px 0px #000;
}

.nb-progress {
    background-color: transparent;
    overflow: hidden;
    &::-webkit-progress-bar {
        background-color: transparent;
    }
    &:indeterminate::-moz-progress-bar {
        background-color: transparent;
    }
}

.nb-range {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    background: transparent;

    &::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        box-shadow: none;
        border: none;
        padding: 0.125rem;
    }
    &::-moz-range-track {
        -webkit-appearance: none;
        box-shadow: none;
        border: none;
        padding: 0.125rem;
    }
    &::-ms-track {
        -webkit-appearance: none;
        box-shadow: none;
        border: none;
        padding: 0.125rem;
    }
}

.nb-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #000;
    height: 1rem;
    width: 1rem;
    border-radius: 100%;
}

.nb-range::-moz-range-thumb {
    border: none;
    border-radius: 0;
    background: #000;
    height: 1rem;
    width: 1rem;
}