.primeweb-icon-menu-container {
    display: flex;
    align-items: center;
    position: relative;
}

.primeweb-icon-menu-trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s;
}

.primeweb-icon-menu-items {
    display: none;
    /* Hidden by default */
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    position: relative;
    /* Or relative depending on desired flow, but absolute allows overlay if needed. However, spec implies inline expansion. Let's try relative first for flow, or absolute if it shouldn't push content. Spec says "reveals a horizontal menu", usually implies pushing or overlaying. Let's stick to flex flow for now as it's "inline with logo". */
    /* Actually, if it's inline, it should probably be relative/static flow. But if it's "revealing", it might need to not take up space when hidden? 
	   If it doesn't take space when hidden, `display: none` is better, but we want fade in. 
	   Let's use max-width or similar for expansion animation if desired, but spec just says "fade in".
	   Let's keep it simple: It takes space when open? Or it overlays?
	   "A row of menu items appears next to the icon."
	   If it pushes other elements, that might be jarring. But if it's in a header, maybe there is space.
	   Let's assume it flows naturally for now (relative).
	*/
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Show items when active class is added (handled by JS) */
.primeweb-icon-menu-items.active {
    opacity: 1;
}

/* Animation Types */

/* Fade In (Default) */
.primeweb-icon-menu-item {
    text-decoration: none;
    padding: 5px 10px;
    /* Basic padding */
    border-radius: 4px;
    opacity: 0;
    transition-property: opacity, transform, color, background-color;
    transition-timing-function: ease;
    /* Duration and Delay set via JS */
}

.primeweb-icon-menu-items.active .primeweb-icon-menu-item {
    opacity: 1;
    transform: none;
}

/* Slide Up */
.primeweb-icon-menu-container[data-animation-type="slide-up"] .primeweb-icon-menu-item {
    transform: translateY(20px);
}

/* Slide Down */
.primeweb-icon-menu-container[data-animation-type="slide-down"] .primeweb-icon-menu-item {
    transform: translateY(-20px);
}

/* Slide Left */
.primeweb-icon-menu-container[data-animation-type="slide-left"] .primeweb-icon-menu-item {
    transform: translateX(20px);
}

/* Slide Right */
.primeweb-icon-menu-container[data-animation-type="slide-right"] .primeweb-icon-menu-item {
    transform: translateX(-20px);
}

/* Zoom In */
.primeweb-icon-menu-container[data-animation-type="zoom-in"] .primeweb-icon-menu-item {
    transform: scale(0.5);
}

/* None */
.primeweb-icon-menu-container[data-animation-type="none"] .primeweb-icon-menu-item {
    opacity: 0;
    /* Still hide initially */
    transition: none;
}

.primeweb-icon-menu-container[data-animation-type="none"] .primeweb-icon-menu-items.active .primeweb-icon-menu-item {
    opacity: 1;
}

/* Layout Directions Support for Slides */
/* If RTL, Left/Right might need flipping if we want logical direction, but physical direction is usually expected for "Slide Left" */


/* Layout Directions */
.primeweb-icon-menu-container.icon-left {
    flex-direction: row;
}

.primeweb-icon-menu-container.icon-right {
    flex-direction: row-reverse;
}

/* RTL Support */
body.rtl .primeweb-icon-menu-item {
    transform: translateX(10px);
}

body.rtl .primeweb-icon-menu-items.active .primeweb-icon-menu-item {
    transform: translateX(0);
}

/* Staggered delays will be handled by JS or we can add nth-child css if max items is known, but JS is safer for dynamic count */

/* Dropdown Styles for Templates */
.primeweb-item-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.primeweb-dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 99;
    padding: 15px;
    border-radius: 4px;
}

.primeweb-item-wrapper:hover .primeweb-dropdown-content,
.primeweb-item-wrapper .primeweb-icon-menu-item.active+.primeweb-dropdown-content {
    display: block;
}

/* Adjust dropdown position for RTL if needed, or if close to edge */
body.rtl .primeweb-dropdown-content {
    left: auto;
    right: 0;
}

/* Width Modes */
.primeweb-dropdown-content[data-width="auto"] {
    min-width: 250px;
    width: auto;
    white-space: nowrap;
    /* Prevent wrapping unless implicitly forced */
}

/* Full Width Breakout */
/* Position and width are now calculated via JS in frontend.js for better accuracy */
.primeweb-dropdown-content[data-width="full"] {
    position: absolute;
    box-sizing: border-box;
    /* JS will set left, width, etc. */
}

/* Reset whitespace for normal content inside */
.primeweb-dropdown-content div {
    white-space: normal;
}