/* Grid Token Expansion Styles - Applied to wrapper */
.interactive-button-group-wrapper.grid-token-expand {
  position: relative;
  z-index: 1;
  grid-column: span 1;
  grid-row: span 1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  transition: grid-column 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    grid-row 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: grid-column, grid-row;
}

.interactive-button-group-wrapper.grid-token-expand:hover,
.interactive-button-group-wrapper.grid-token-expand:focus-within {
  z-index: 10;
  transform: scale(1.01);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.interactive-button-group-wrapper.grid-token-expand.is-transitioning {
  transition: grid-column 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    grid-row 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Additional styles for button group responsiveness and growing/shrinking */
.interactive-button-group {
  width: 100%;
}

/* Grid layouts with flexible growing/shrinking columns */
.interactive-button-group.grid {
  display: grid;
  gap: inherit;
  width: 100%;
}

.interactive-button-group.grid>div {
  display: flex;
  flex-direction: column;
  grid-column: span 1;
  grid-row: span 1;
  min-width: 0;
}

.interactive-button-group.grid>div>button {
  flex: 1;
  min-height: fit-content;
  width: 100%;
}

/* Flexbox layouts for better growing/shrinking */
.interactive-button-group.flex {
  display: flex;
  flex-wrap: wrap;
  gap: inherit;
}

.interactive-button-group.flex>div {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.interactive-button-group.flex>div>button {
  flex: 1;
  min-width: 0;
}

/* Responsive grid adjustments with flexible sizing using Container Queries */
@container (max-width: 640px) {
  .interactive-button-group.grid-cols-1.\@sm\:grid-cols-2.\@md\:grid-cols-3.\@lg\:grid-cols-4 {
    grid-template-columns: repeat(1, 1fr);
  }
}

@container (min-width: 641px) and (max-width: 768px) {
  .interactive-button-group.grid-cols-1.\@sm\:grid-cols-2.\@md\:grid-cols-3.\@lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 769px) and (max-width: 1024px) {
  .interactive-button-group.grid-cols-1.\@sm\:grid-cols-2.\@md\:grid-cols-3.\@lg\:grid-cols-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container (min-width: 1025px) {
  .interactive-button-group.grid-cols-1.\@sm\:grid-cols-2.\@md\:grid-cols-3.\@lg\:grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Compact layout specific styles */
.interactive-button-group.flex.flex-wrap>div {
  flex: 0 0 auto;
  max-width: fit-content;
}

.interactive-button-group.flex.flex-wrap>div>button {
  flex: none;
}

/* Expand/Collapse Toggle Button Styles */
.group-expand-toggle {
  transition: all 0.2s ease-in-out;
  opacity: 0.7;
}

.group-expand-toggle:hover {
  opacity: 1;
  transform: scale(1.05);
  background-color: hsl(var(--b2));
}

/* Smooth transitions for layout changes */
.interactive-button-group.transition-all {
  transition: all 0.3s ease-in-out;
}

/* Hover effects for button group wrapper (only when hamburger toggle is enabled) */
.interactive-button-group-wrapper.hover-scale {
  transition: transform 0.3s ease-in-out;
}

.interactive-button-group-wrapper.hover-scale:hover {
  transform: scale(1.02);
}

/* Collapsed state styles for better visual feedback */
.interactive-button-group.collapsed {
  opacity: 0.9;
}

/* Expand/collapse animation for the button group */
@keyframes buttonGroupExpand {
  from {
    transform: scale(0.95);
    opacity: 0.8;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes buttonGroupCollapse {
  from {
    transform: scale(1);
    opacity: 1;
  }

  to {
    transform: scale(0.95);
    opacity: 0.8;
  }
}