/* Popover wrapper */
[dse-popover] {
    --dse-popover-transition-speed: 0.3s; 
    --dse-popover-transform-shift: 10px;  
    --dse-popover-content-box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; 
    --dse-popover-hover-color: var(--gs-primary); 
    --dse-popover-hover-border-color: ; 
    --dse-popover-hover-background-color:; 
    --dse-popover-active-border-color: ; 
    --dse-popover-active-background-color: ;
    --dse-popover-active-color: ; 
}

/* Popover button styles */
[dse-popover-button] {
    border: 1px solid; /* Default border style */
    border-color: transparent; /* Initial border color */
    background-color: transparent; /* Initial background color */
    color: inherit; /* Inherit text color */
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; /* Smooth transition for hover/active states */
}

/* Hover state styles for popover button */
[dse-popover-button]:hover {
    border-color: var(--dse-popover-hover-border-color);
    background-color: var(--dse-popover-hover-background-color);
    color: var(--dse-popover-hover-color);
}

/* Active state styles for popover button */
[dse-popover-button][aria-expanded="true"] {
    border-color: var(--dse-popover-active-border-color);
    background-color: var(--dse-popover-active-background-color);
    color: var(--dse-popover-active-color);
}

/* Toggle visibility of default and active states */
[dse-popover-default-state] {
    display: block; /* Show default state by default */
}

[dse-popover-active-state] {
    display: none; /* Hide active state by default */
}

[dse-popover-button][aria-expanded="true"] [dse-popover-default-state] {
    display: none; /* Hide default elements when expanded */
}

[dse-popover-button][aria-expanded="true"] [dse-popover-active-state] {
    display: block; /* Show active elements when expanded */
}

[dse-popover-button][aria-expanded="false"] [dse-popover-default-state] {
    display: block; /* Show default elements when not expanded */
}

[dse-popover-button][aria-expanded="false"] [dse-popover-active-state] {
    display: none; /* Hide active elements when not expanded */
}

/* Popover content transitions */
[dse-popover-content] {
    opacity: 0;
    visibility: hidden; /* Ensure hidden state when collapsed */
    transform: translateY(var(--dse-popover-transform-shift)); /* Initial transform for animation */
    transition: opacity var(--dse-popover-transition-speed) ease, transform var(--dse-popover-transition-speed) ease;
    box-shadow: var(--dse-popover-content-box-shadow); /* Apply box shadow */
}

/* When popover is expanded (visible) */
[dse-popover-content][dse-popover-expanded="true"] {
    opacity: 1;
    visibility: visible; /* Make visible when expanded */
    transform: translateY(0); /* Reset transform to apply the effect */
}

/* Direction-based transitions using CSS variables */
[dse-popover][dse-popover-direction="top"] [dse-popover-content][dse-popover-expanded="true"] {
    transform: translateY(calc(-1 * var(--dse-popover-transform-shift)));
}

[dse-popover][dse-popover-direction="bottom"] [dse-popover-content][dse-popover-expanded="true"] {
    transform: translateY(var(--dse-popover-transform-shift));
}

[dse-popover][dse-popover-direction="left"] [dse-popover-content][dse-popover-expanded="true"] {
    transform: translateX(calc(-1 * var(--dse-popover-transform-shift)));
}

[dse-popover][dse-popover-direction="right"] [dse-popover-content][dse-popover-expanded="true"] {
    transform: translateX(var(--dse-popover-transform-shift));
}