@import "./cit-colors.css";

vaadin-confirm-dialog-overlay::part(overlay) {
    min-width: 33%;
}

vaadin-app-layout::part(drawer) {
    border-inline-end: 0;
}

vaadin-card {
    pre {
        background: none;
    }
}

.sticky-footer {
    position: sticky;
    bottom: 0;

    vaadin-card& {
        background: hsl(from var(--lumo-base-color) h s 25%);
    }
}

.chat-disclaimer {
    display: contents;
}

pre.question {
    background: none;
    font-family: inherit;
    white-space: normal;
}

.answer {
    min-width: 30vw;
    max-width: 100%;
    overflow-x: auto;

    > p {
        text-wrap-style: balance;
        max-inline-size: 150ch;
    }

    > table {
        margin: 0;
        padding: 0;
        width: 100%;
        border-collapse: collapse;

        tr {
            border-bottom: 1px solid var(--lumo-contrast-10pct);
        }

        > thead {
            > tr {
                > th {
                    padding: 5px 10px;
                    text-align: left;
                    text-transform: capitalize;
                    font-size: var(--lumo-font-size-s);
                    font-weight: 500;
                }
            }
        }

        > tbody {
            > tr {
                &:nth-child(odd) {
                    background-color: var(--lumo-contrast-5pct);
                }

                > td {
                    padding: 5px 10px;
                    text-align: left;
                }
            }
        }

        th.numeric, td.numeric {
            text-align: right;
        }
    }
}

vaadin-text-area > vaadin-button:not([disabled]) > vaadin-icon {
    fill: var(--lumo-primary-color);
}

.dots {
    --dot-color-state1: var(--lumo-primary-color);
    --dot-color-state2: rgba(from var(--dot-color-state1) r g b / .2);
    --dot-size: 10px;

    display: inline-block;
    position: relative;
    inset-inline-start: var(--lumo-space-m);
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: calc(var(--dot-size) / 2);
    background-color: var(--dot-color-state2);
    animation: dots 1s infinite linear alternate;
    animation-delay: 0.5s;

    &:before, &:after {
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        width: var(--dot-size);
        height: var(--dot-size);
        border-radius: calc(var(--dot-size) / 2);
        background-color: var(--dot-color-state2);
        animation: dots 1s infinite alternate;
    }

    &:before {
        left: calc(var(--dot-size) * -1.5);
        animation-delay: 0s;
    }

    &:after {
        left: calc(var(--dot-size) * 1.5);
        animation-delay: 1s;
    }
}

@keyframes dots {
    0% {
        background-color: var(--dot-color-state1);
    }
    50%, 100% {
        background-color: var(--dot-color-state2);
    }
}

.top-bar {
    padding: var(--lumo-space-m) 0;
}

.menu-bar {
    margin: 0 var(--lumo-space-l) 0 auto;
}