:root {
    --text-color: #000;
    --secondary-text-color: #666;
    --border-color: #ddd;
    --background-color: #fff;
    --secondary-background-color: #eee;
    --accent-color: #ccc;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0px;
}

header {
    background: var(--background-color);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    display: grid;
    grid-template-areas: "content flag";
    grid-template-columns: auto 1fr;

    .flag {
        grid-area: flag;
        position: relative;
        overflow: hidden;

        background: linear-gradient(
            to bottom,
            #000 0% 20%,
            #fff 20% 40%,
            #000 40% 60%,
            #fff 60% 80%,
            #000 80% 100%
        );

        height: 100%;
    }

    .flag::before {
        content: "";
        position: absolute;

        height: 100%;
        aspect-ratio: 1.66;

        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        background: linear-gradient(
            to bottom,
            #5bcefa 0% 20%,
            #f5a9b8 20% 40%,
            #fff 40% 60%,
            #f5a9b8 60% 80%,
            #5bcefa 80% 100%
        );

        clip-path: polygon(
            50% 0%,
            100% 100%,
            70% 100%,
            50% 60%,
            50% 60%,
            30% 100%,
            0% 100%
        );
    }

    .content {
        grid-area: content;
        margin: 5px 10px;

        h1 {
            margin: 0px;
            font-size: 20px;
        }

        p {
            margin: 0px;
            font-family: 16px;
            color: var(--secondary-text-color);
        }
    }
}

main {
    width: 100%;
    max-width: 800px;
    margin-left: 50%;
    transform: translateX(-50%);

    .wrapper {
        margin: 8px;
        margin-top: 0px;

        .search {
            padding: 8px 0px;
            position: sticky;
            top: 0px;
            background: var(--background-color);

            #search {
                border: 1px solid var(--border-color);
                font-size: 16px;
                padding: 10px;
                width: 100%;
                border-radius: 20px;
                outline: none;
                color: var(--text-color);

                &:active, &:focus {
                    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
                }
            }

            #suggestions {
                display: inline-flex;
                gap: 8px;
                margin-top: 10px;
                overflow-x: auto;
                width: 100%;

                .suggestion {
                    background: transparent;
                    border: 1px solid var(--border-color);
                    border-radius: 20px;
                    padding: 5px 8px;
                    cursor: pointer;
                    font-size: 14px;
                }
            }
        }


        #list {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
            display: grid;
            gap: 10px;

            .entry {
                margin: 0px;
                border: 1px solid var(--border-color);
                border-radius: 10px;

                .wrapper {
                    margin-top: 8px;

                    summary {
                        cursor: pointer;
                        display: grid;
                        grid-template-columns: auto auto 1fr auto;
                        column-gap: 8px;

                        &::before {
                            content: "►";
                            align-self: center;
                            transform: rotateZ(90deg);
                            transition: 300ms transform;
                        }

                        [open] &::before {
                            transform: rotateZ(-90deg);
                        }

                        .name {
                            display: inline;
                            font-weight: bold;
                            font-size: 22px;
                            align-self: center;
                        }

                        .industries {
                            display: grid;
                            align-items: center;

                            .industry {
                                width: min-content;
                                border-radius: 20px;
                                background: var(--secondary-background-color);
                                padding: 6px;
                                font-size: 14px;
                            }
                        }

                        .score {
                            float: right;
                            width: 28px;
                            height: 28px;
                            justify-content: center;
                            align-content: center;
                            text-align: center;
                            border-radius: 8px;
                            font-weight: bold;
                            font-family: monospace;
                            font-size: 22px;
                            padding: 4px;
                            vertical-align: middle;

                            &.positive {
                                color: darkgreen;
                                background-color: lightgreen;
                            }

                            &.negative {
                                color: darkred;
                                background-color: lightpink;
                            }
                        }
                    }

                    .allyship {
                        border-top: 1px solid var(--border-color);
                    }
                }
            }
        }
    }
}

.allyship {
    margin: 8px 0px;
    display: grid;
    gap: 2px;
    column-gap: 8px;
    grid-template-columns: auto auto 1fr;

    .category {
        text-transform: capitalize;
        grid-column: span 3;
        font-weight: bold;
        font-size: 16px;
        margin-top: 10px;
    }

    .name {
        text-transform: capitalize;
        align-self: center;
    }

    .status {
        min-width: 28px;
        height: 28px;
        justify-content: center;
        align-content: center;
        text-align: center;
        display: inline-block;
        border-radius: 8px;
        font-weight: bold;
        font-family: monospace;
        border: 1px solid var(--border-color);

        &.positive, &:has(>option[value="positive"]:checked) {
            color: darkgreen;
            background-color: lightgreen;
        }

        &.negative, &:has(>option[value="negative"]:checked) {
            color: darkred;
            background-color: lightpink;
        }

        &.mixed, &:has(>option[value="mixed"]:checked) {
            color: darkorange;
            background-color: lightyellow;
        }

        &.null, &:has(>option[value=""]:checked) {
            color: var(--secondary-text-color);
            background-color: var(--secondary-background-color);
        }
    }

    .evidences {
        align-self: center;

        a {
            display: block;
            color: #000;
        }
    }
}

.button {
    width: 100%;
    border: 1px solid var(--border-color);
    background: var(--secondary-background-color);
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    padding: 8px;
    transition: 200ms background;

    &:hover {
        background: var(--accent-color);
    }
}

dialog {
    border: none;
    border-radius: 16px;

    header {
        display: grid;
        grid-template-columns: 1fr auto;
        column-gap: 8px;

        h2 {
            margin: 0px;
            font-size: 20px;
            align-self: center;

            &.hide {
                display: none;
            }
        }
    }

    &::backdrop {
        background-color: rgba(0, 0, 0, 0.7);
    }
}