.mol-header-utils {
    @apply gap-2 lg:w-auto cursor-pointer;
    @apply flex items-center;
    @apply p-1 md:backdrop-blur-sm gap-2 rounded-full bg-white bg-opacity-90;

    .utils-search {
        @apply flex bg-white border-4 border-gray-100 rounded-full w-12 h-12 items-center justify-center relative;

        .atm-button {
            @apply rounded-none text-center p-0 mr-0 text-[1rem] leading-4 bg-[transparent];

            .atm-icon {
                @apply text-black text-[1rem] leading-4 overflow-hidden;

                &:before {
                    @apply transform transition-transform;
                }

                &:hover {
                    &:before {
                        @apply scale-[0.85];
                    }
                }
            }

            .atm-button-secondary {
                .button-content {
                    @apply w-10 h-10 bg-white rounded-full flex items-center justify-center mb-0 pl-0 pr-0;
                    @apply cursor-pointer;
                }

                .button-underline {
                    @apply hidden;
                }
            }
        }
    }

    .utils-cta{
        @apply hidden lg:block;

        .atm-button-primary{
            @apply block;
        }
    }

    button.primary {
        @apply font-display flex items-center h-12;
        @apply bg-secondary-col-1 text-white px-5 rounded-full transition-all;
        transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);

        > * {
            @apply pointer-events-none;
        }

        &:hover {
            @apply border-opacity-80;

            span.icon {
                &::after {
                    width: 10px;
                }
                &::before {
                    width: 19px;
                }
            }
        }

        .org-header--active & {
            @apply justify-center h-12 w-12 sm:w-auto p-0 sm:px-5;
        }

        span.text-closed {
            .org-header--active & {
                @apply hidden;
            }
        }

        span.text-open {
            @apply hidden;

            .org-header--active & {
                @apply hidden sm:inline-block;
            }
        }

        span.icon {
            @apply relative w-4 h-4 ml-2 flex justify-center items-center;
            transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);

            &::after,
            &::before {
                content: '';
                height: 2px;
                width: 13px;
                @apply bg-white absolute left-0 rounded-sm transition-transform;
                transform: translateY(-3px);
                transform-origin: center;
                transition: all 0.2s cubic-bezier(0.1, 0.82, 0.76, 0.965);
            }

            &::after {
                width: 15px;
                transform: translateY(3px);
            }

            .org-header--active & {
                @apply m-0 sm:ml-2;
                &::after,
                &::before {
                    width: 15px;
                }

                &::before {
                    transform: rotate(45deg);
                }

                &::after {
                    transform: rotate(-45deg);
                }
            }
        }
    }

    .selector {
        @apply hidden lg:block ;

        .selector-label{
            @apply px-2;
        }
    }

    #header-nav-open-menu {
        @apply lg:hidden;
    }
}