@import "@fancyapps/fancybox/dist/jquery.fancybox.min"


$black: #000000 !default


//  aside
//  blockquote
//  collection
//  cover
//  faq
//  image
//  slider

.promethee
    &__component
        &__page > &:not(&__cover)
            @extend .container

        &__page > &__collection:not(&__cover),
        &__page > &__row:not(&__cover)
            padding-left: 0
            padding-right: 0

        &__page > &
            margin-bottom: $grid-gutter-width*2

            > .promethee__component__row
                @extend .row

        &__aside
            .aside__button
                a
                    display: inline-block
                &--center
                    text-align: center
                &--left
                    text-align: left
                &--right
                    text-align: right

        &__blockquote
            .blockquote
                border: none
                font-size: 30px
                text-align: center

                p
                    display: inline
                    font-size: 30px

                div
                    margin-bottom: 20px
                    &::before, &::after
                        display: inline-block

                    &::before
                        content: '“ '

                    &::after
                        content: ' ”'

            .author
                font-size: 14px

        &__collection
            margin-bottom: $grid-gutter-width
            > div
                margin-bottom: $grid-gutter-width
            .collection-item__content
                &:not(:last-of-type)
                    margin-bottom: $grid-gutter-width
                a + p
                    margin-bottom: 0
                    margin-top: 10px

        &__cover
            background-position: center center
            background-repeat: no-repeat
            background-size: cover
            display: flex
            flex-direction: column
            justify-content: center
            margin-bottom: 50px
            min-height: 300px
            padding: $grid-gutter-width 0
            position: relative
            text-align: center

            &::before
                background-color: rgba(0,0,0,.3)
                bottom: 0
                content: ''
                left: 0
                pointer-events: none
                position: absolute
                right: 0
                top: 0

            h1,
            p
                color: white
                position: relative

            p:last-of-type
                margin-bottom: 0

        &__image
            margin-bottom: $grid-gutter-width
            figcaption
                margin-top: 10px

        &__faq
            &_item:not(:last-of-type)
                padding-bottom: 20px
            h4
                cursor: pointer
                position: relative
                &::after
                    border-right: 2px solid $black
                    border-top: 2px solid $black
                    content: ''
                    display: block
                    height: 8px
                    position: absolute
                    right: 10px
                    top: 5px
                    transform: rotate(135deg)
                    transition: transform .4s ease
                    width: 8px
                &[aria-expanded="true"]
                    &::after
                        transform: rotate(315deg)
            a
                display: block
            p:last-child
                margin-bottom: 0

        &__slider
            .promethee__component
                margin-bottom: 0
            .fontawesome-carousel-control .fa
                font-size: 30px
                position: absolute
                top: 50%
                transform: translateY(-50%)
            .carousel-item
                margin-bottom: 0
                &__content
                    text-align: center
                    p:last-of-type
                        margin-bottom: 0
                        margin-top: 10px
            .carousel-control-prev,
            .carousel-control-next
                color: $black
            .carousel-control-prev
                justify-content: flex-start
            .carousel-control-next
                justify-content: flex-end


        // component direct in root
        &__page > &__blockquote,
        &__page > &__cover
            .promethee__component__content
                @extend .col-md-8
                @extend .offset-md-2 !optional
                @extend .col-md-offset-2 !optional

        &__page > &__aside,
        &__page > &__faq,
        &__page > &__image,
        &__page > &__text,
        &__page > &__video
            .promethee__component__content
                @extend .col-md-10
                @extend .offset-md-1 !optional
                @extend .col-md-offset-1 !optional

        @media screen and (max-width: 900px)
            &__cover
                min-height: 450px

        @media screen and (max-width: 1200px)
            &__cover
                min-height: 600px


@media print
    body
        font-size: 125%
    .promethee
        &__component
            &__page > div:not(&__cover):not(&__slider)
                max-width: 90%
    .container
        max-width: 90%