@use 'sass:color'
@use '../palettes/brushes' as hues

#affil_wrap
    display: flex
    flex-direction: row
    flex-wrap: nowrap

    & > div:first-child
        display: flex
        flex-direction: column
        flex-wrap: nowrap
        flex-shrink: 2
        padding: 2vh 1vw 2vh
        margin-left: 1vw
        margin-top: 5vw
        margin-bottom: 12vw

        & > a
            display: flex
            flex-direction: row
            justify-content: center
            align-items: center
            width: 2vw
            margin: 1vh 0.5vw
            padding: 0.5vw
            background-color: hues.$fill-icon
            border: 1px solid #fff
            border-radius: 50% 66%
            text-decoration: none

            &::after
                //z-index: 1
                display: block
                position: absolute
                width: 3.3vw
                height: 3vw
                border-radius: 50% 66%
                background-image: url('/images/themes/default/textures/iridescence.png')
                // background-color: #ccc
                background-size: 100%
                content: ''
                // opacity: 0.8

            & svg
                width: 2vw
                fill: color.change(hues.$border-base-notification, $saturation: 50%)

    & > div:last-child 
        // margin: 6vh auto
        margin: 3vw auto 0 25%
        padding: 2vw

    #affil_info
        display: flex
        flex-direction: column
        justify-content: center
        // width: 50vw
        // height: 33vh
        // margin-left: 10%

        & a
            text-decoration: none

        & a:has(article)
            cursor: pointer
            background-color: #F5F2E8
            color: #45413C 
            border: 1px solid hues.$bg-helper-highlight-color
            width: 20vw
            height: 33vw
            font-size: clamp(9pt, 1vw, 32pt)
            position: absolute
            border-radius: 3%
            box-shadow: 0 2px 2px hues.$bg-helper-highlight-color
            // z-index: 1
            transition: z-index 3s, box-shadow 3s, transform 2s
            $card_siblings: 4
            $step: calc(calc(-180 / $card_siblings) / 57.3)
            $trans_step: $step + calc(calc(180 / ($card_siblings*2)) / 57.3)
            transform: rotate(calc(calc(-180 / $card_siblings) / 57.3)*0.5+rad)


            @for $i from 0 through $card_siblings - 1
                &:nth-child(#{2*$i})
                    transform: rotate(($i*$step)+rad)
                    transition: transform 2s, z-index 3s

                    &:hover
                        transform: rotate(($i*0.75*$trans_step)+rad)
                        z-index: 1

                        &:active
                            transform: translateY(-4vh)

                &:not(:first-child):nth-child(#{2*$i+1})
                    transform: rotate(($i*1.5*$step)+rad)
                    transition: transform 2s, z-index 3s

                    &:hover
                        transform: rotate(($i*1.25*$trans_step)+rad)
                        z-index: 1

                        &:active
                            transform: translateY(-4vh)


            // &:nth-child(2n)
            //     transform: rotate(-5deg)
            //     transition: transform 2s, z-index 3s

            //     &:hover
            //         transform: rotate(-2deg)
            //         z-index: 1

            // &:not(:first-child):nth-child(2n+1)
            //     transform: rotate(-15deg)
            //     transition: transform 2s, z-index 3s

            //     &:hover
            //         transform: rotate(-12deg)
            //         z-index: 1

            &:hover
                transform: rotate(calc(calc(-180 / $card_siblings) / 57.3)*0.25+rad)
                box-shadow: 0 4px 8px hues.$bg-helper-highlight-color
                z-index: 1

                &:active
                    transform: translateY(-4vh)

            & span > p
                margin: 0 auto
                text-align: center
                word-break: break-all
                max-width: 66%

                &.contact_datum
                    background-color: #45413C
                    color: #F5F2E8

            &::after
                position: absolute
                background-image: url('/images/themes/default/textures/embossed.png')
                background-size: 100%
                width: 100%
                opacity: 0.9
                height: 101%
                top: 0
                content: ''

        & > img
            filter: grayscale(100%) contrast(1.8)
            margin: 0 auto
            width: 50%
            transform: rotate(-60deg)