@use "../abstracts/mixins";
@use "../abstracts/variables";
@use "../components/buttons";

.sectionTitle{
    position: relative;
    color: variables.$cDark;

    &_link{
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 1;
    }

    &_header{
        display: flex;
        align-items: flex-start;

        &_content{
            position: relative;
            flex: 1;
            text-transform: lowercase;
            font-family: variables.$ffC;
            @include mixins.fontSize(20,20);
            font-weight: 700;
            padding: 10px 0;

            &_title{
                opacity: 0;

                @include mixins.respondTo('xs'){
                    opacity: 1;
                }

                &::before{
                    content: "";
                    display: inline-block;
                    width: 10px; height: 10px;
                    border-radius: 10px;
                    background-color: variables.$cGreyBlue;
                    margin-right: 25px;

                    @include mixins.respondTo('xs'){
                        margin-right: 15px;
                    }
                }
            }
            
            &_separator{
                position: absolute;
                left: 0; bottom: 0; right: 0;
                height: 2px;
                transform: scaleX(0);
                transform-origin: left;
                background-color: currentColor;

                @include mixins.respondTo('xs'){
                    transform: scaleX(1);
                }
            }
        }

        &_additional{
            opacity: 0;
            margin-left: 20px;
            @include mixins.fontSize(70,70);

            @include mixins.respondTo('md'){
                @include mixins.fontSize(50,50,variables.$baseFontSizeMd);
            }

            @include mixins.respondTo('xs'){
                opacity: 1;
                @include mixins.fontSize(30,40,variables.$baseFontSizeXs);
                margin-left: 5px;
            }

            &--counter{
                width: 140px;
                text-align: right;
            }

        }
    }

    &_content{
        padding-top: 5vh;
        padding-bottom: 4.5vh;
        @include mixins.fontSize(70,70);
        opacity: 0;

        @include mixins.respondTo('md'){
            @include mixins.fontSize(50,50,variables.$baseFontSizeMd);
            padding-top: 4vh;
            padding-bottom: 3vh;
        }

        @include mixins.respondTo('xs'){
            padding-bottom: 2vh;
            @include mixins.fontSize(28,28,variables.$baseFontSizeXs);
            opacity: 1;
        }
    }

    &_footer{
        display: flex;
        align-items: flex-end;
        min-height: 40px;
        
        &_separator{
            flex: 1;
            border-bottom: 2px solid currentColor;
            transform-origin: left;
            transform: scaleX(0);

            @include mixins.respondTo('xs'){
                display: none;
            }
        }

        &_link{
            @extend .button;
            margin-left: 20px;
            opacity: 0;

            @include mixins.respondTo('xs'){
                opacity: 1;
                margin-left: 0;
            }

            &--pulse{
                &::after{
                    animation: buttonPulse 1.5s forwards;
                    animation-timing-function: variables.$Power4EaseInOut;
                }
            }
        }

        &--showSeparatorXs{
            @include mixins.respondTo('xs'){
                .sectionTitle_footer_separator{
                    display: block;
                    transform: scaleX(1);
                }
                .sectionTitle_footer_link{
                    margin-left: 20px;
                }
            }
        }
    }

    &--light{
        color: #FFF;

        .sectionTitle_header_content::before{
            background-color: #FFF;
        }
    }

    @include mixins.hover{
        .sectionTitle_footer_link{
            color: variables.$cLight;
    
            &::after{
                transform: scaleY(1);
            }
        }
    }
}


@keyframes buttonPulse {
    50% {
        transform: translateY(-101%);
    }
}