import { css } from 'lit'

export default css`
    :host {
        --light-blue-color: color-mix(
            in hsl,
            var(--terra-color-nasa-blue-tint) 65%,
            white
        ); /* this color doesn't exist in HDS, perhaps the design should change? */

        background-color: var(--terra-color-nasa-blue-dark);
        color: white;
        display: block;
        padding-bottom: 55%;
        position: relative;
        width: 100%;
    }

    h3 {
        color: var(--light-blue-color);
        margin-bottom: 1rem;
    }

    dialog {
        position: absolute;
        z-index: 999;
        width: 100px;
        height: 100px;
        padding: 0;
        place-self: center;
    }

    .container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-rows: auto 1fr;
    }

    .scrollable {
        overflow-y: auto;
        display: grid;
        grid-template-columns: 250px 1fr;
        grid-column: span 2;
        width: 100%;
    }

    header.search {
        border-bottom: 1px solid var(--terra-color-nasa-blue-shade);
        grid-column: span 2;
        padding: 15px;
        padding-bottom: 25px;
        display: flex;
        gap: 10px;
    }

    header.search button {
        width: 36px;
        height: 36px;
    }

    .browse-by-category aside {
        padding: 0 15px;
    }

    .browse-by-category main {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 2rem;
        min-width: 800px;
        overflow-x: auto;
    }

    .column {
        min-width: 0; /* Prevents overflow issues */
    }

    .browse-by-category ul {
        list-style: none;
        padding: 0;
    }

    .browse-by-category li {
        border-radius: 4px;
        cursor: pointer;
        margin: 0;
        margin-bottom: 0.5rem;
        padding: 8px;
        transition: background-color 0.15s;
    }

    .browse-by-category li:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .browse-by-category terra-button {
        margin-top: 15px;
    }

    .browse-by-category terra-button::part(base) {
        color: white;
    }

    label {
        color: white;
        display: flex;
        align-items: center;
    }

    input[type='radio'] {
        margin-right: 10px;
    }

    .variables-container {
        display: grid;
        grid-template-areas:
            'header header'
            'aside main';
        grid-template-columns: 250px 1fr;
        grid-template-rows: auto 1fr;
    }

    .variables-container header {
        grid-area: header;
        padding: 15px;
        padding-bottom: 0;
    }

    .variables-container aside {
        grid-area: aside;
        padding: 15px;
    }

    .variables-container main {
        grid-area: main;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 2rem;
        overflow-x: auto;
        padding: 15px;
    }

    .facet {
        margin-left: 10px;
    }
`
