:root{--dropdown-bg-color:var(--color-primary)}.menu{color:var(--color-font);cursor:pointer;width:fit-content;font-size:16px;line-height:1.6;list-style:none;display:flex}.menu a{color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;text-decoration:none}.menu .link{border-radius:16px;justify-content:center;align-items:center;gap:12px;padding:12px 36px;transition:all .48s cubic-bezier(.23,1,.32,1);display:flex;position:relative;overflow:hidden}.menu .link:after{content:"";background-color:var(--dropdown-bg-color);z-index:-1;transform-origin:0;width:100%;height:100%;transition:transform .48s cubic-bezier(.23,1,.32,1);position:absolute;top:0;left:0;transform:scaleX(0)}.menu .link svg{width:14px;height:14px;fill:var(--color-font);transition:all .48s cubic-bezier(.23,1,.32,1)}.menu .item{position:relative}.menu .item .submenu{opacity:0;visibility:hidden;z-index:1;pointer-events:none;border:1px solid #ccc;border-radius:0 0 16px 16px;flex-direction:column;align-items:center;width:100%;list-style:none;transition:all .48s cubic-bezier(.23,1,.32,1);display:flex;position:absolute;top:100%;left:0;overflow:hidden;transform:translateY(-12px)}.menu .item:hover .submenu{opacity:1;visibility:visible;pointer-events:auto;border-top:#0000;border-color:var(--dropdown-bg-color);transform:translateY(0)}.menu .item:hover .link{border-radius:16px 16px 0 0}.menu .item:hover .link:after{transform-origin:100%;transform:scaleX(1)}.menu .item:hover .link svg{transform:rotate(-180deg)}.submenu .submenu-item{width:100%;transition:all .48s cubic-bezier(.23,1,.32,1)}.submenu .submenu-link{text-align:center;background-color:var(--color-gray-800);width:100%;padding:12px 8px;transition:all .48s cubic-bezier(.23,1,.32,1);display:block;position:relative}.submenu .submenu-item:last-child .submenu-link{border-bottom:none}.submenu .submenu-link:before{content:"";background-color:var(--dropdown-bg-color);z-index:-1;transform-origin:0;width:100%;height:100%;transition:transform .48s cubic-bezier(.23,1,.32,1);position:absolute;top:0;left:0;transform:scaleX(0)}.submenu .submenu-link:hover{background-color:#0000}.submenu .submenu-link:hover:before{transform-origin:100%;transform:scaleX(1)}
