// Tab Panel
//
// Basic HTML structure with tab and panels
//
// Can use `.color-…` helpers on list
//
// Default open tab should be set by `data-open="true"` attribute.
//
// Markup: tabpanel.twig
//
// Styleguide: Components.TabPanel

// Fake tab Panel
//
// Same UI but it’s real navigation, with anchors and not javascript driven panels.
//
// Current Link should be set by `aria-current="page"` attribute.
//
// Markup: tabpanel-fake.twig
//
// Styleguide: Components.TabPanel.Fake


// Tab Panel with block of cards
//
// Markup: tabpanel-with-block-list.twig
//
// Styleguide: Components.TabPanel.WithBlocksOfCards

.tabpanel
    display flex
    flex-direction column

    &-list
        display flex
        margin 0
        padding 0
        list-style none

        .no-js &[role='tablist']
            display none

        &-tab
            padding .5em
            display flex
            flex 1
            position relative
            text-align center
            justify-content center
            align-items center
            cursor pointer
            text-transform inherit // `text-transform: none;` set on button by normalize
            font-size 1em
            line-height 1.5em
            background var(--color-fade)
            color var(--color-base)
            border 1px solid var(--color-borders)
            border-right-color transparent
            font-family $fontstack-secondary

            &:last-child
                border-right-color var(--color-borders)

            .tabpanel[data-loading] &[data-open]
            &[aria-selected=true]
            &[aria-current='page']
                color currentColor
                background-color var(--color-bg-primary)
                border-color transparent
                font-weight 700

                &:before
                    content ''
                    position absolute
                    top -1px
                    bottom -1px
                    left -1px
                    pointer-events none
                    background currentColor
                    width 3px

            &[aria-disabled=true]
                cursor not-allowed
                pointer-events none
                background var(--color-borders)
                color s('hsla(var(--color-base-h), var(--color-base-s), var(--color-base-l), .5)')

    &-body
        flex-grow 1

        .tabpanel[data-loading] &:not([data-open])
        &[aria-hidden=true]
            display none

    &.box
        border-width 0

        > .tabpanel-list
            :first-child
                border-radius $radius 0 0 0
            :last-child
                border-radius 0 $radius 0 0