@use '../consts.scss' as consts;
@use '../mixins.scss' as mixins;

.footer {
    color: consts.$schema-text;
    background-color: consts.$schema-accent-background;
    padding: 40px;
    .footer__view_all{
        border: none;
    }
    
    & > .container > .mainContent {
        display: flex;

        @include mixins.media(lg) {
            flex-wrap: wrap;
        }

        @include mixins.media(md) {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 20px;
        }

        column-gap: consts.$gap-medium;

        & > .logoAndCopyright {
            display: flex;
            align-items: center;
            flex-direction: column;
            row-gap: consts.$gap-tiny;

            @include mixins.media(lg) {
                width: 100%;
                row-gap: 10px;
                margin-bottom: 40px;

                & > .other {
                    display: flex;
                    gap: 10px;
                }
            }

            @include mixins.media(md) {
                margin-bottom: 10px;
            }

            @include mixins.media(sm) {
                & > .other {
                    gap: 2px;
                    font-size: 14px;
                }
            }
            
            & > .logo {
                width: 145px;
                height: 60px;
                filter: brightness(0.3);

                @include mixins.media(lg) {
                    height: unset;
                }
            }
        }

        .titledBlock {
            display: flex;
            flex-direction: column;
            row-gap: consts.$gap-tiny;

            .arrow {
                display: none;
            }

            @include mixins.media(md) {
                &:not(:last-child) {
                    height: 22px;
                    overflow-y: hidden;
                    overflow-x: visible;
                    transition: height 0.2s;
                }

                &:last-child {
                    .items {
                        justify-content: center;
                    }
                }

                padding: 0 4px;

                .arrow-holder {
                    display: flex;
                    justify-content: center;
                    gap: 10px;
                }

                .arrow {
                    display: block;
                    width: 10px;
                    transition: transform 0.2s;
                }

                .fn_view_all {
                    display: none;
                }

                a {
                    display: block;
                }

                &.--open {
                    height: max-content;

                    .arrow {
                        transform: rotate(180deg);
                    }
                }
            }

            & .title, & > .items {
                display: flex;
                flex-direction: column;
                gap: consts.$gap-tiny;
            }
            & .title {
                text-transform: uppercase;
                margin: 0;
                @include mixins.text('heading-8')
            }

            & > .items {
                @include mixins.text('text-5');
                
                & > .socialLink {
                    color: consts.$schema-text;
                }

                &.--horizontal {
                    flex-direction: row;
                }
                & > .item {
                    color: inherit;
                    text-decoration: none;
                    @include mixins.text('text-5')
                }
            }

        }

        &  > .itemsSquare {
            display: grid;
            gap: consts.$gap-medium;

            grid-template-columns: repeat(2, 1fr);

            @include mixins.media(md) {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                text-align: center;
            }

        }

        .subscibeFormGroup {
            display: flex;
            border: 2px solid consts.$schema-text;
            background-color: transparent;
            height: 50px;
            .input {
                // position: absolute;
                // inset: 0;

                background-color: transparent;
                border: unset;
                outline: unset
            }
            button[type="submit"] {
                padding: 0 14px;
                background-color: transparent;
                border: unset;
                outline: unset;
            }
        }

        
    }
    
}