// Dynamic typo for sidebar elements

body:not(.dark-scheme) {

    .dynamic-typo {

        &.light-typo,
        &.dark-typo {

            &.back-link,
            &.icon-button.fixed,
            .social-bar,
            .scroll-top,
            .color-switcher-item.dark {

                @include transition(color, $transition-duration-faster, $transition-function);
            }
        }
        
        &.light-typo {

            &.back-link,
            &.icon-button.fixed,
            .social-bar,
            .scroll-top,
            .color-switcher-item.dark {
                color: $color-white !important;
            }

            @include sm-screen {

                .color-switcher-item {

                    &.dark {
                        color: inherit;
                    }
                }
            }
        }
        
        &.dark-typo {
            color: inherit;
        }
    }

    // Dynamic typo for headers

    .header-dynamic-typo {

        &:not(.-sticky) {
            
            // Logo

            .logo-dynamic {

                .light,
                .dark {
                    display: unset;
                    position: absolute;
                    opacity: 0;
                    top: 0;

                    @include transition(opacity, $transition-duration-faster, $transition-function);
                }
            }

            &.light-typo {

                .hamburger-outer,
                .branding-title,
                .menu-blank,
                .menu > li > a,
                .cart-button-total a,
                .icon-button:not(.-small),
                .lang-dropdown {
                    color: $color-white !important;
                }

                // Logo

                .logo-dynamic {

                    .dark {
                        opacity: 0;
                    }

                    .light {
                        opacity: 1;
                    }
                }

                select {
                            
                    @include chevron(light);
                }
            }

            &.dark-typo {

                .hamburger-outer,
                .branding-title,
                .menu-blank,
                .menu > li > a,
                .cart-button-total a,
                .icon-button:not(.-small),
                .lang-dropdown {
                    color: inherit;
                }

                // Logo

                .logo-dynamic {

                    .dark {
                        opacity: 1;
                    }

                    .light {
                        opacity: 0;
                    }
                }
            }

            &.dark-typo,
            &.light-typo {

                .logo {
                    opacity: 0;
                }

                .hamburger-outer,
                .branding-title,
                .menu-blank,
                .menu > li > a,
                .cart,
                .cart-button-total a,
                .icon-button:not(.-small),
                .lang-dropdown {

                    @include transition(color, $transition-duration-faster, $transition-function);
                }
            }
        }
    }
}
