.tab-container {
    --border-color: #848484;
    margin-bottom: 2rem;

    .tab-list {
        display: flex;
        gap: 0.25rem;

        .tab-btn {
            display: grid;
            align-content: end;
            background-color: #f5f5f5;
            padding: 0.5rem 1.25rem 0 1.25rem;
            border-radius: 0.25rem 0.25rem 0 0;
            min-width: fit-content;
            height: 3rem;
            gap: 0.25rem;
            outline: none;
            position: relative;
            
            > span {
                display: flex;
                flex-direction: column;
                align-items: center;
                height: 1.5rem;
                white-space: nowrap;
            }
            
            &::after {
                display: block;
                width: 100%;
                height: 0.25rem;
                background-color: transparent;
                border-top-left-radius: 0.25rem;
                border-top-right-radius: 0.25rem;
                content: "";
            }
            
            &:hover:not(.active) {
                background-color: #003e96;
                color: #fff;
                text-decoration: underline;
                text-underline-offset: 0.3em;
                text-decoration-thickness: 2px;
            }
            
            &.active {
                z-index: 5;
                margin-bottom: -1px;
                font-weight: 600;
                color: #000053;
                background-color: #fff;
                border: 1px solid var(--border-color);
                border-bottom: unset;

                &::before {
                    position: absolute;
                    width: 100%;
                    height: 1px;
                    background-color: #fff;
                    bottom: -1px;
                    left: 0;
                    content: "";
                    z-index: 10;
                }
                &::after {
                    position: relative;
                    background-color: #84d3ff;
                    z-index: 5;
                }
            }
        }
    }
    
    .tab-panel {
        display: none;
        border: 1px solid var(--border-color);
        padding: 1.5rem;
        
        &.active {
            display: block;
        }
        
        *:last-child {
            margin: unset;
        }
        
        ul {
            margin-left: 0;
            padding-left: 2rem;
            display: grid;
            gap: 0.25rem;
        }
    }
}

* + .tab-container {
    margin-top: 2rem;
}