/* Fichero de estilos específico para Header options */
/* Fundación CARTIF 2021 */

/* Header options (menú de imágenes que se encuentra en:
    - Create a PED scenario,
    - Modify a PED scenario,
    - PED technologies explorer.
) */
.header-options > .image-create { grid-area: create; }
.header-options > .image-modify { grid-area: modify; }
.header-options > .image-explore { grid-area: explore; }
.header-options > .description { grid-area: description; }
.header-options > img {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
    max-width: 150px;
}

.header-options > img[onclick] {
    cursor: pointer;
}

.header-options {
    --color-active: rgb(var(--makingcity-gray));
    --options-order: "description create modify explore";

    display: grid;
    padding: 1rem;
    background-color: rgba(var(--makingcity-blue), .1);
    gap: 1rem;
    place-items: center;
    grid-template-columns: 1fr 80px 80px 80px;
    grid-template-areas: var(--options-order);
    border: 1px solid rgba(var(--makingcity-blue), .2);
    border-radius: .3rem;
}

.header-options:is(
    [data-active="create"],
    [data-active="modify"],
    [data-active="explore"]
) {
    grid-template-columns: 150px 1fr 80px 80px;
}

/* Change options order based on active option */
.header-options[data-active="create"] {
    --options-order: "create description modify explore";
}
.header-options[data-active="modify"] {
    --options-order: "modify description create explore";
}
.header-options[data-active="explore"] {
    --options-order: "explore description create modify";
}

.header-options > .description > p {
    margin: 0;
}

.header-options.no-description {
    justify-content: center;
    grid-template-columns: repeat(3, 80px);
    --options-order: "create modify explore";
}

/* Header options (active option) */
.header-options[data-active="create"] > img.image-create,
.header-options[data-active="modify"] > img.image-modify,
.header-options[data-active="explore"] > img.image-explore {
    border: .7ex solid var(--color-active);
    border-radius: 5rem !important;
}

/* Media queries */
@media screen and (max-width: 750px) {
    /* Header options */
    .header-options {
        grid-template-columns: repeat(3, 1fr) !important;
        grid-template-areas:
            "description description description"
            "create modify explore";
    }

    .header-options.no-description {
        grid-template-areas: "create modify explore";
    }
}