@charset "UTF-8";

.document__tab-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-block-end: 2.56rem;
    column-gap: 0.88rem;
    border-block-end: 2px solid var(--c-border);

    @media (max-width: 1023px) {
        column-gap: 0.125rem;
    }

    > li {
        position: relative;

        @media (min-width: 768px) {
            align-self: flex-end;
        }

        &:has(button[aria-selected="true"]) {
            &::after {
                position: absolute;
                bottom: -0.69rem;
                left: 50%;
                width: 0;
                height: 0;
                border-width: 0.875rem 0.5rem 0 0.5rem;
                border-color: var(--c-accent) transparent transparent transparent;
                content: '';
                translate: -50% 0;
            }
        }
    }

    button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding-block: 0.62rem 0.81rem;
        border: var(--c-accent) 1px solid;
        border-radius: 0.5rem 0.5rem 0 0;
        color: var(--c-accent);
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.3;
        text-align: center;
        letter-spacing: 0.04em;
        border-block-end: none;

        @media (max-width: 767px) {
            height: 100%;
        }

        &[aria-selected="true"] {
            margin-block-end: -2px;
            background-color: var(--c-accent);
            color: var(--c-white);
            font-size: 0.9375rem;

            @media (min-width: 768px) {
                padding-block: 0.94rem;
            }
        }

        br {
            @media (min-width: 768px) {
                display: none;
            }
        }
    }
}

.document__tab-panel {
    &[aria-hidden="true"] {
        display: none;
    }

    &[aria-hidden="false"] {
        > * {
            animation: fadeIn 0.8s ease forwards;
        }
    }
}