/*
 * mentaxonomy Molecular
 * Advanced BLAST options.
 *
 * Loaded after molecular.css.
 */


/* Container
-------------------------------------------------- */

#advanced-options {
    max-width: 760px;
    margin-top: 26px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #d7e2da;
    border-radius: 7px;

    box-shadow:
        0 1px 2px rgba(22, 52, 35, 0.02);
}


/* Summary
-------------------------------------------------- */

#advanced-options > summary {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 48px;
    padding: 12px 16px;

    color: #365d47;

    cursor: pointer;

    font-size: 0.9rem;
    font-weight: 700;

    list-style: none;

    user-select: none;

    transition:
        color 120ms ease,
        background-color 120ms ease;
}

#advanced-options > summary::-webkit-details-marker {
    display: none;
}

#advanced-options > summary::before {
    content: "▸";

    display: inline-block;

    margin-right: 8px;

    color: #397c55;

    font-size: 0.82rem;

    transition: transform 120ms ease;
}

#advanced-options[open] > summary::before {
    transform: rotate(90deg);
}

#advanced-options > summary:hover {
    color: #285f3e;
    background: #f7faf8;
}

#advanced-options[open] > summary {
    background: #f7faf8;

    border-bottom: 1px solid #e1e9e3;
}


/* Options area
-------------------------------------------------- */

#advanced-options[open] {
    padding-bottom: 20px;
}

#advanced-options[open] > :not(summary) {
    margin-left: 20px;
    margin-right: 20px;
}


/* Labels
-------------------------------------------------- */

#advanced-options label {
    color: #35483c;

    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.35;
}


/* Standard controls
-------------------------------------------------- */

#advanced-options select,
#advanced-options input[type="number"],
#advanced-options input[type="text"] {
    min-height: 40px;

    margin-top: 6px;
    padding: 7px 34px 7px 11px;

    color: #26342c;
    background-color: #ffffff;

    border: 1px solid #cbd8d0;
    border-radius: 5px;

    font: inherit;
    font-size: 0.88rem;

    transition:
        border-color 120ms ease,
        box-shadow 120ms ease,
        background-color 120ms ease;
}

#advanced-options input[type="number"],
#advanced-options input[type="text"] {
    padding-right: 10px;
}

#advanced-options select:hover,
#advanced-options input[type="number"]:hover,
#advanced-options input[type="text"]:hover {
    border-color: #9eb9a8;
}

#advanced-options select:focus,
#advanced-options input[type="number"]:focus,
#advanced-options input[type="text"]:focus {
    border-color: #397c55;

    outline: 0;

    box-shadow:
        0 0 0 3px rgba(57, 124, 85, 0.09);
}


/* Control sizing
-------------------------------------------------- */

#advanced-options select {
    width: auto;
    max-width: 100%;
}

#advanced-options input[type="number"] {
    width: 120px;
}


/* Option groups
-------------------------------------------------- */

#advanced-options p {
    margin-top: 18px;
    margin-bottom: 0;
}

#advanced-options p:first-of-type {
    margin-top: 20px;
}


/* Checkboxes
-------------------------------------------------- */

#advanced-options label:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    gap: 9px;

    width: fit-content;

    margin-top: 16px;

    color: #35483c;

    cursor: pointer;

    font-size: 0.86rem;
    font-weight: 500;
}

#advanced-options input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;

    accent-color: #397c55;

    cursor: pointer;
}


/* Restore defaults
-------------------------------------------------- */

#advanced-options button {
    min-height: 36px;

    margin-top: 22px;
    padding: 7px 12px;

    color: #397c55;
    background: #ffffff;

    border: 1px solid #b9cbbf;
    border-radius: 5px;

    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;

    cursor: pointer;

    transition:
        color 120ms ease,
        background-color 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

#advanced-options button:hover {
    color: #285f3e;
    background: #f4f8f5;

    border-color: #8faf9a;
}

#advanced-options button:focus-visible {
    outline: 0;

    box-shadow:
        0 0 0 3px rgba(57, 124, 85, 0.10);
}


/* Responsive
-------------------------------------------------- */

@media (max-width: 700px) {

    #advanced-options {
        max-width: none;
    }

    #advanced-options[open] > :not(summary) {
        margin-left: 16px;
        margin-right: 16px;
    }

    #advanced-options select {
        max-width: 100%;
    }
}