#hntrbrk-look-up {
    --b: 0, 0%, 8%;
    --w: 0, 0%, 92%;
    --g: 0, 0%, 70%;
    --ch: 0, 0%, 60%;
    --bl: 223.1, 100%, 32.7%;
    --r: 9, 100%, 43%;
    --y: 43, 98%, 54%;
    --pd-l: 125px;
    --nav-h: clamp(70px, 8.67vw, 100px);
    --nav-w: 400px;
    --h: clamp(30px, 3.33vw, 48px);
    --h-static: clamp(36px, 3.33vw, 48px);
    --sh: clamp(18px, 2.5vw, 20px);
    --sh-static: clamp(20px, 1.8vw, 26px);
    --dot-r: url('data:image/svg+xml,%3Csvg fill="hsl(9, 100%, 43%)" viewBox="0 0 14 14" width="14" height="14" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="7" cy="7" r="7" /%3E%3C/svg%3E');
    --dot-bl: url('data:image/svg+xml,%3Csvg fill="hsl(223.1, 100%, 32.7%)" viewBox="0 0 14 14" width="14" height="14" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="7" cy="7" r="7" /%3E%3C/svg%3E');
    --csw-primary-color: hsl(0, 0%, 30%);
    --csw-input-color: hsl(0, 0%, 8%);
    --csw-text-color: hsl(0, 0%, 98%);
    --csw-input-text-color: hsl(0, 0%, 60%);

    display: flex;
    flex-flow: column;
    gap: 15px;
}

#hntrbrk-look-up form {
    display: inline-flex;
    width: 100%;
    max-width: 380px;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: hidden;
    padding: 0;
    line-height: 24px;
    row-gap: 15px;
    font-size: 20px;
    font-family: 'Barlow', sans-serif;
    font-weight: 300;
    border: none;
    border-radius: 0;
    height: 100%;
}

#hntrbrk-look-up input[type="number"] {
    font-family: inherit;
    font-weight: 300;
    height: 44px;
    width: 100%;
    padding: 0;
    padding-inline: 20px;
    box-sizing: border-box;
    box-shadow: none;
    background-color: hsla(var(--w), .2);
    border: 1px solid hsla(var(--bl), .4);
    border-radius: 1px;
    font-size: 16px;
    line-height: 24px;
    outline: none;
}

#hntrbrk-look-up input[type="number"]:focus,
#hntrbrk-look-up input[type="number"]:active {
    border-color: hsla(var(--bl), 1);
}

#hntrbrk-look-up button[type="submit"] {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
    font-size: 20px;
    font-family: 'Barlow', sans-serif;
    font-weight: 400;
    line-height: 0.8em;
    text-transform: uppercase;
    padding: 10px 16px;
    color: hsl(var(--w));
    background-color: hsla(var(--bl), 1);
    border-radius: 1px;
    align-items: center;
    margin: 0;
    height: auto;
    border: 1px solid hsla(var(--bl), 1);
    outline: 2px solid transparent;
    outline-offset: 2px;
    cursor: pointer;
}

#hntrbrk-look-up button[type="submit"] .hunterbrook-look-up__icon {
    width: 15px;
    height: 15px;
    animation: spin 1s linear infinite;
    transform-origin: center;
}

#hntrbrk-look-up button[type="submit"] svg {
    display: block;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
