@import "./_golfer.css";

#search {
    display: grid;
    gap: .75rem;
    grid-template-columns: 2fr 1fr;

    fieldset {
        flex-direction: row;
        min-width: 0;

        input, select {
            flex: 1;
            min-width: 0;
        }

        label { flex-direction: row }
    }
}

@media (max-width: 50rem) { #search { grid-template-columns: 1fr } }

#results {
    display: flex;
    flex-direction: column;
    gap: .5rem;

    a {
        border: 2px solid var(--color);
        color: var(--color);
        display: flex;
        flex-direction: column;
        gap: .5rem;
        padding: 1rem;
    }

    span {
        overflow-x: auto;
        overflow-y: hidden;
    }

    code {
        white-space: pre;
        background-color: var(--light-grey);
        border-radius: .25rem;
        padding: .25rem;
        .match {
            background-color: var(--yellow);
        }
    }

    a:hover {
        background: var(--color);
        color: var(--background);
        text-decoration: none;

        code {
            background-color: var(--grey);
        }
    }
}
