/**
 * Floating Settings Panel Styles
 *
 * Glassmorphism-inspired floating popover system for element settings.
 * Uses soft shadows, rounded corners, and subtle transparency.
 */

/* ==========================================================================
   Main Floating Container
   ========================================================================== */

.floating-settings {
  @apply z-50;
}

/* ==========================================================================
   Main Panel
   ========================================================================== */

.floating-settings__panel {
  @apply w-80;
  @apply rounded-xl;
  @apply border border-white/20;
  @apply shadow-2xl;
  @apply overflow-hidden;

  /* Glassmorphism effect */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  /* Soft shadow for depth */
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.15),
    0 10px 20px -5px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

.floating-settings__header {
  @apply flex items-center justify-between;
  @apply px-4 py-3;
  @apply border-b border-gray-100;
  @apply bg-gray-50/50;
}

.floating-settings__title {
  @apply flex items-center gap-2;
  @apply text-sm font-semibold text-gray-800;
  @apply truncate;
  @apply max-w-[200px];
}

.floating-settings__close {
  @apply flex items-center justify-center;
  @apply w-6 h-6;
  @apply rounded-md;
  @apply text-gray-400;
  @apply transition-all duration-150;

  &:hover {
    @apply bg-gray-100 text-gray-600;
  }

  &:active {
    @apply scale-95;
  }
}

.floating-settings__content {
  @apply p-3;
  @apply max-h-[480px];
  @apply overflow-y-auto;

  /* Custom scrollbar */
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  &::-webkit-scrollbar-thumb {
    @apply bg-gray-200 rounded-full;

    &:hover {
      @apply bg-gray-300;
    }
  }
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.floating-settings__tabs {
  @apply flex gap-0.5;
  @apply p-1;
  @apply mb-3;
  @apply bg-gray-100/80 rounded-lg;
}

.floating-settings__tab {
  @apply flex items-center justify-center;
  @apply flex-1;
  @apply px-2 py-1.5;
  @apply text-xs font-medium;
  @apply text-gray-500;
  @apply rounded-md;
  @apply transition-all duration-150;

  &:hover:not([data-state="active"]) {
    @apply text-gray-700 bg-white/50;
  }

  &[data-state="active"] {
    @apply bg-white text-gray-900;
    @apply shadow-sm;
  }
}

.floating-settings__tab-content {
  @apply outline-none;
}

/* ==========================================================================
   Sections & Groups
   ========================================================================== */

.floating-settings__section {
  @apply space-y-3;
}

.floating-settings__section--scrollable {
  @apply max-h-[320px] overflow-y-auto pr-1;
}

.floating-settings__group {
  @apply mb-3;

  &:last-child {
    @apply mb-0;
  }
}

/* ==========================================================================
   Media Picker
   ========================================================================== */

.floating-settings__media-btn {
  @apply inline-flex items-center justify-center gap-2;
  @apply px-3 py-2;
  @apply text-sm font-medium;
  @apply text-gray-700;
  @apply bg-gray-50;
  @apply border border-gray-200;
  @apply rounded-lg;
  @apply transition-all duration-150;
  @apply cursor-pointer;

  &:hover:not(:disabled) {
    @apply bg-gray-100 border-gray-300;
  }

  &:active:not(:disabled) {
    @apply scale-[0.98];
  }

  &:disabled {
    @apply opacity-50 cursor-not-allowed;
  }

  svg {
    @apply w-4 h-4;
  }
}

.floating-settings__media-btn {
  @apply text-xs px-2.5 py-1.5;
}

.floating-settings__media-preview {
  @apply relative inline-block mb-2;
}

.floating-settings__media-preview img {
  @apply rounded-lg border border-gray-200;
  @apply object-cover;
  @apply transition-all duration-150;

  &:hover {
    @apply border-gray-300;
  }
}

.floating-settings__media-remove {
  @apply absolute -top-2 -right-2;
  @apply w-5 h-5;
  @apply flex items-center justify-center;
  @apply bg-red-500 text-white;
  @apply rounded-full;
  @apply shadow-md;
  @apply transition-all duration-150;
  @apply cursor-pointer;
  @apply z-10;

  &:hover {
    @apply bg-red-600 scale-110;
  }

  &:active {
    @apply scale-95;
  }

  svg {
    @apply w-3 h-3;
  }
}

.media-picker p {
  @apply text-xs text-gray-500 mt-2;
}

.floating-settings__label {
  @apply block;
  @apply text-xs font-medium text-gray-500;
  @apply mb-1.5;
}

/* ==========================================================================
   Inputs
   ========================================================================== */

.floating-settings__input {
  @apply w-full;
  @apply px-3 py-2;
  @apply text-sm;
  @apply bg-gray-50;
  @apply border border-gray-200;
  @apply rounded-lg;
  @apply transition-all duration-150;
  @apply outline-none;

  &:hover {
    @apply border-gray-300;
  }

  &:focus {
    @apply border-indigo-400 ring-2 ring-indigo-100;
    @apply bg-white;
  }
}

.floating-settings__input--sm {
  @apply px-2 py-1.5 text-xs text-center;
}

.floating-settings__input--disabled {
  @apply bg-gray-100 text-gray-400 cursor-not-allowed;
}

/* Textarea specific styles */
.floating-settings__textarea {
  @apply resize-y;
  @apply min-h-[60px];
  @apply font-mono text-xs;
}

/* ==========================================================================
   Fields with Labels
   ========================================================================== */

.floating-settings__field {
  @apply flex items-center gap-2;
}
.floating-settings__field input {
	@apply w-full;
}

.floating-settings__field-label {
  @apply text-xs text-gray-400 font-medium w-4;
}

/* ==========================================================================
   Grid Layouts
   ========================================================================== */

.floating-settings__grid-2 {
  @apply grid grid-cols-2 gap-2;
}

.floating-settings__grid-3 {
  @apply grid grid-cols-3 gap-2;
}

.floating-settings__grid-4 {
  @apply grid grid-cols-4 gap-2;
}

/* ==========================================================================
   Row Layout
   ========================================================================== */

.floating-settings__row {
  @apply flex items-center justify-between;
  @apply py-2;
}

/* ==========================================================================
   Divider
   ========================================================================== */

.floating-settings__divider {
  @apply h-px;
  @apply bg-gray-200;
  @apply my-4;
}

/* ==========================================================================
   Switch
   ========================================================================== */

.floating-settings__switch {
  @apply relative;
  @apply w-9 h-5;
  @apply bg-gray-200;
  @apply rounded-full;
  @apply transition-colors duration-200;
  @apply cursor-pointer;

  &[data-state="checked"] {
    @apply bg-indigo-500;
  }
}

.floating-settings__switch-thumb {
  @apply block;
  @apply w-4 h-4;
  @apply bg-white;
  @apply rounded-full;
  @apply shadow-sm;
  @apply transition-transform duration-200;
  @apply translate-x-0.5;

  &[data-state="checked"] {
    @apply translate-x-[18px];
  }
}

/* ==========================================================================
   Color Fields
   ========================================================================== */

.floating-settings__color-field {
  @apply flex items-center gap-2;
}

.floating-settings__color-picker {
  @apply w-9 h-9;
  @apply rounded-lg;
  @apply border border-gray-200;
  @apply cursor-pointer;
  @apply overflow-hidden;
  @apply shrink-0;

  &::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  &::-webkit-color-swatch {
    @apply border-none rounded-md;
  }
}

.floating-settings__color-label {
  @apply text-xs text-gray-500;
}

/* ==========================================================================
   Cascade Buttons (for opening sub-popovers)
   ========================================================================== */

.floating-settings__cascade-btn {
  @apply flex items-center gap-2;
  @apply w-full;
  @apply px-3 py-2;
  @apply mb-2;
  @apply text-sm text-gray-700;
  @apply bg-gray-50;
  @apply border border-gray-200;
  @apply rounded-lg;
  @apply transition-all duration-150;
  @apply cursor-pointer;

  &:last-child {
    @apply mb-0;
  }

  &:hover {
    @apply bg-gray-100 border-gray-300;
  }

  &:active {
    @apply scale-[0.98];
  }

  &.active {
    @apply bg-indigo-50 border-indigo-200 text-indigo-700;
  }
}

.floating-settings__cascade-preview {
  @apply text-xs text-gray-400;
  @apply ml-auto mr-1;
}

/* ==========================================================================
   Cascading Popovers (Typography, Borders)
   ========================================================================== */

.floating-popover {
  @apply absolute;
  @apply left-full top-0;
  @apply ml-2;
  @apply w-72;
  @apply rounded-xl;
  @apply border border-white/20;
  @apply shadow-2xl;
  @apply overflow-hidden;
  @apply z-10;

  /* Glassmorphism effect */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  /* Enhanced shadow */
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.18),
    0 10px 20px -5px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

.floating-popover--cascade {
  /* Offset to appear cascading from parent */
  margin-left: 8px;
}

.floating-popover__header {
  @apply flex items-center justify-between;
  @apply px-3 py-2.5;
  @apply border-b border-gray-100;
  @apply bg-gray-50/50;
}

.floating-popover__title {
  @apply text-xs font-semibold text-gray-700 uppercase tracking-wide;
}

.floating-popover__close {
  @apply flex items-center justify-center;
  @apply w-5 h-5;
  @apply rounded;
  @apply text-gray-400;
  @apply transition-all duration-150;

  &:hover {
    @apply bg-gray-100 text-gray-600;
  }
}

.floating-popover__content {
  @apply p-3;
  @apply max-h-[400px];
  @apply overflow-y-auto;
}

/* ==========================================================================
   Popover Form Elements
   ========================================================================== */

.floating-popover__group {
  @apply mb-3;

  &:last-child {
    @apply mb-0;
  }
}

.floating-popover__label {
  @apply block;
  @apply text-xs font-medium text-gray-500;
  @apply mb-1.5;
}

.floating-popover__input {
  @apply flex-1;
  @apply px-2.5 py-1.5;
  @apply text-sm;
  @apply bg-gray-50;
  @apply border border-gray-200;
  @apply rounded-lg;
  @apply transition-all duration-150;
  @apply outline-none;

  &:hover {
    @apply border-gray-300;
  }

  &:focus {
    @apply border-indigo-400 ring-2 ring-indigo-100;
    @apply bg-white;
  }
}

.floating-popover__grid-2 {
  @apply grid grid-cols-2 gap-3;
}

/* ==========================================================================
   Popover Sliders
   ========================================================================== */

.floating-popover__slider {
  @apply relative flex items-center;
  @apply h-5 w-full;
  @apply select-none touch-none;
}

.floating-popover__slider-track {
  @apply relative;
  @apply h-1.5 w-full;
  @apply bg-gray-200;
  @apply rounded-full;
  @apply overflow-hidden;
}

.floating-popover__slider-range {
  @apply absolute h-full;
  @apply bg-indigo-500;
  @apply rounded-full;
}

.floating-popover__slider-thumb {
  @apply block;
  @apply w-3.5 h-3.5;
  @apply bg-white;
  @apply border-2 border-indigo-500;
  @apply rounded-full;
  @apply shadow;
  @apply outline-none;
  @apply cursor-grab;

  &:hover {
    @apply scale-110;
  }

  &:focus {
    @apply ring-2 ring-indigo-200;
  }

  &:active {
    @apply cursor-grabbing;
  }
}

/* ==========================================================================
   Popover Selects
   ========================================================================== */

.floating-popover__select {
  @apply flex items-center justify-between;
  @apply w-full;
  @apply px-2.5 py-1.5;
  @apply text-sm;
  @apply bg-gray-50;
  @apply border border-gray-200;
  @apply rounded-lg;
  @apply transition-all duration-150;
  @apply outline-none;
  @apply cursor-pointer;

  &:hover {
    @apply border-gray-300;
  }

  &[data-state="open"] {
    @apply border-indigo-400 ring-2 ring-indigo-100;
  }
}

.floating-popover__select-content {
  @apply z-[100];
  @apply bg-white;
  @apply border border-gray-200;
  @apply rounded-lg;
  @apply shadow-xl;
  @apply overflow-hidden;
  @apply max-h-60;
  @apply overflow-y-auto;

  /* Animation */
  animation: floatingPopoverSelectIn 0.15s ease-out;
}

@keyframes floatingPopoverSelectIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.floating-popover__select-item {
  @apply relative;
  @apply flex items-center;
  @apply px-3 py-2;
  @apply text-sm text-gray-700;
  @apply cursor-pointer;
  @apply outline-none;

  &:hover,
  &[data-highlighted] {
    @apply bg-indigo-50 text-indigo-700;
  }

  &[data-state="checked"] {
    @apply bg-indigo-100 text-indigo-800;
  }
}

.floating-popover__select-indicator {
  @apply absolute right-2;
  @apply text-indigo-600;
}

/* Group label for grouped selects in floating popovers */
.floating-popover__select-group-label {
  @apply px-3 py-1.5;
  @apply text-xs font-semibold text-gray-500 uppercase tracking-wide;
  @apply bg-gray-50 border-b border-gray-100;
}

/* Separator between groups in floating popovers */
.floating-popover__select-separator {
  @apply h-px bg-gray-200;
}

/* ==========================================================================
   Button Groups & Toggles
   ========================================================================== */

.floating-popover__button-group {
  @apply flex flex-wrap gap-1;
}

.floating-popover__toggle {
  @apply px-2 py-1;
  @apply text-xs font-medium;
  @apply text-gray-600;
  @apply bg-gray-100;
  @apply border border-transparent;
  @apply rounded-md;
  @apply transition-all duration-150;
  @apply cursor-pointer;

  &:hover:not(.active) {
    @apply bg-gray-200;
  }

  &.active {
    @apply bg-indigo-100 text-indigo-700 border-indigo-200;
  }
}

.floating-popover__button-row {
  @apply flex gap-1;
}

.floating-popover__toggle-btn {
  @apply flex-1;
  @apply px-2 py-1.5;
  @apply text-xs font-medium;
  @apply text-gray-600;
  @apply bg-gray-100;
  @apply border border-transparent;
  @apply rounded-md;
  @apply transition-all duration-150;
  @apply cursor-pointer;

  &:hover:not(.active) {
    @apply bg-gray-200;
  }

  &.active {
    @apply bg-indigo-100 text-indigo-700 border-indigo-200;
  }
}

.floating-popover__toggle-btn--sm {
  @apply px-1.5 py-1;
}

/* ==========================================================================
   Color Inputs (Popover)
   ========================================================================== */

.floating-popover__color-input {
  @apply flex items-center gap-2;
}

.floating-popover__color-picker {
  @apply w-8 h-8;
  @apply rounded-md;
  @apply border border-gray-200;
  @apply cursor-pointer;
  @apply overflow-hidden;
  @apply shrink-0;

  &::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  &::-webkit-color-swatch {
    @apply border-none rounded;
  }
}

/* ==========================================================================
   Previews
   ========================================================================== */

.floating-popover__preview {
  @apply flex items-center justify-center;
  @apply p-4;
  @apply bg-gray-50;
  @apply border border-gray-100;
  @apply rounded-lg;
  @apply mt-2;
}

.floating-popover__border-preview {
  @apply flex items-center justify-center;
  @apply h-20;
  @apply bg-gray-50;
  @apply rounded-lg;
}

.floating-popover__border-preview-box {
  @apply w-16 h-16;
  @apply bg-white;
}

/* ==========================================================================
   Custom HTML (compact mode)
   ========================================================================== */

.floating-popover__custom-html {
  @apply space-y-2;
}

.floating-popover__textarea {
  @apply w-full p-2.5 text-xs font-mono;
  @apply bg-white border border-gray-200 rounded-md;
  @apply resize-y min-h-[80px] max-h-[150px];
  @apply focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary;
  @apply placeholder:text-gray-400;
}

.floating-popover__clear-btn {
  @apply flex items-center gap-1;
  @apply text-xs text-danger;
  @apply hover:underline;
  @apply cursor-pointer;
}

.floating-popover__preview {
  @apply p-2 bg-gray-50 rounded-md border border-gray-200;
}

.floating-popover__preview-label {
  @apply text-[10px] font-medium text-gray-400 uppercase tracking-wide mb-1;
}

.floating-popover__preview-content {
  @apply text-xs;
}

/* ==========================================================================
   Placeholder Popover Items
   ========================================================================== */

.floating-popover__placeholder-list {
  @apply space-y-1;
}

.floating-popover__placeholder-item {
  @apply flex flex-col items-start gap-0.5;
  @apply w-full;
  @apply px-2 py-1.5;
  @apply text-left;
  @apply rounded-md;
  @apply transition-colors duration-150;
  @apply cursor-pointer;

  &:hover {
    @apply bg-gray-50;
  }

  &:active {
    @apply bg-gray-100;
  }
}

.floating-popover__placeholder-code {
  @apply text-xs font-mono text-primary;
}

.floating-popover__placeholder-desc {
  @apply text-[10px] text-gray-400;
}

/* ==========================================================================
   Divider
   ========================================================================== */

.floating-settings__divider {
  @apply h-px;
  @apply my-4;
  @apply bg-gray-200;
}

/* ==========================================================================
   Button Group (ui component)
   ========================================================================== */

.button-group {
  @apply inline-flex;
  @apply rounded-md;
  @apply border border-gray-200;
  @apply bg-gray-50;
  @apply p-0.5;
  @apply overflow-hidden;
}

.button-group--full {
  @apply w-full;
}

.button-group--compact {
  @apply gap-0;
}

.button-group__item {
  @apply rounded font-medium;
  @apply transition-all duration-150;
  @apply text-gray-500;
  @apply whitespace-nowrap;

  &:hover:not(.button-group__item--active) {
    @apply text-gray-700;
  }
}

.button-group__item--active {
  @apply bg-white text-gray-900;
  @apply shadow-sm;
}

.button-group--full .button-group__item {
  @apply flex-1 text-center justify-center;
}

.button-group__icon {
  @apply mr-1;
}

/* ==========================================================================
   Spacing Grid (for padding/margin controls)
   ========================================================================== */

.floating-settings__spacing-grid {
  @apply flex flex-col gap-2;
}

.floating-settings__spacing-row {
  @apply flex items-center gap-2;
}

.floating-settings__spacing-label {
  @apply w-4 text-xs font-medium text-gray-500 text-center;
}

.floating-settings__spacing-value {
  @apply w-6 text-xs text-gray-500 text-right;
}

/* ==========================================================================
   Border Preview
   ========================================================================== */

.floating-settings__border-preview {
  @apply p-2;
  @apply bg-gray-50;
  @apply rounded-lg;
}

.floating-settings__border-preview-box {
  @apply w-full h-16;
  @apply bg-white;
  @apply flex items-center justify-center;
  @apply text-xs text-gray-400;
}

/* ==========================================================================
   Textarea (for Custom HTML)
   ========================================================================== */

.floating-settings__textarea {
  @apply w-full;
  @apply px-3 py-2;
  @apply bg-gray-800;
  @apply text-gray-100;
  @apply text-xs font-mono;
  @apply rounded-lg;
  @apply border border-gray-700;
  @apply resize-y;
  @apply min-h-[120px];

  &::placeholder {
    @apply text-gray-500;
  }

  &:focus {
    @apply outline-none;
    @apply border-indigo-500;
    @apply ring-1 ring-indigo-500/30;
	@apply bg-gray-800;
  }

  /* Code variant with line numbers feel */
  &--code {
    @apply bg-gray-900;
    @apply text-green-400;
    @apply min-h-[100px];
    line-height: 1.5;
  }
}

/* ==========================================================================
   Warning/Info Box
   ========================================================================== */

.floating-settings__warning {
  @apply flex items-start gap-2;
  @apply p-3;
  @apply bg-amber-500/10;
  @apply text-amber-400;
  @apply rounded-lg;
  @apply text-xs;
  @apply border border-amber-500/20;

  /* Small variant */
  &--small {
    @apply p-2;
    @apply text-[11px];
  }
}

.floating-settings__info {
  @apply flex items-start gap-2;
  @apply p-3;
  @apply bg-blue-500/10;
  @apply text-blue-400;
  @apply rounded-lg;
  @apply text-xs;
  @apply border border-blue-500/20;

  /* Small variant */
  &--small {
    @apply p-2;
    @apply text-[11px];
  }
}

/* ==========================================================================
   Popover Trigger Button
   ========================================================================== */

.floating-settings__popover-trigger {
  @apply flex items-center justify-between w-full;
  @apply px-3 py-2.5;
  @apply bg-gray-50;
  @apply border border-gray-200;
  @apply rounded-lg;
  @apply text-sm text-gray-700;
  @apply cursor-pointer;
  @apply transition-all duration-150;

  &:hover {
    @apply bg-gray-100 border-gray-300;
  }
}

.floating-settings__popover-indicator {
  @apply flex items-center gap-1;
  @apply text-gray-400;
}

/* ==========================================================================
   Floating Custom Code Section
   ========================================================================== */

.floating-popover__custom-js,
.floating-popover__custom-css,
.floating-popover__custom-html {
  @apply space-y-3;
}

.floating-popover__clear-btn {
  @apply flex items-center gap-1.5;
  @apply px-2 py-1.5;
  @apply text-xs text-red-400;
  @apply bg-red-500/10 rounded-md;
  @apply border border-red-500/20;
  @apply cursor-pointer;
  @apply transition-all duration-150;

  &:hover {
    @apply bg-red-500/20 text-red-300;
  }
}

/* ==========================================================================
   Responsive Control
   ========================================================================== */

.responsive-control {
  @apply mb-3;
}

.responsive-control__header {
  @apply flex items-center justify-between;
  @apply mb-1.5;
}

.responsive-control__header--inline {
  @apply gap-2;
}

.responsive-control__breakpoints {
  @apply inline-flex;
  @apply gap-0.5;
  @apply p-0.5;
  @apply bg-gray-100;
  @apply rounded-md;
}

.responsive-control__breakpoint-btn {
  @apply flex items-center justify-center;
  @apply w-6 h-6;
  @apply rounded;
  @apply text-gray-400;
  @apply transition-all duration-150;
  @apply cursor-pointer;

  &:hover {
    @apply text-gray-600 bg-gray-50;
  }

  &.active {
    @apply bg-white text-indigo-600;
    @apply shadow-sm;
  }
}

.responsive-control__input {
  @apply w-full;
}

/* ==========================================================================
   Floating Popover Responsive Header
   ========================================================================== */

.floating-popover__responsive-header {
  @apply flex items-center justify-between;
  @apply mb-1.5;
}

.floating-popover__responsive-header--compact {
  @apply mb-1;
}

.floating-popover__breakpoint-toggle {
  @apply inline-flex;
  @apply gap-0.5;
  @apply p-0.5;
  @apply bg-gray-100;
  @apply rounded-md;
}

.floating-popover__breakpoint-toggle--sm {
  @apply scale-90;
  @apply origin-right;
}

.floating-popover__breakpoint-btn {
  @apply flex items-center justify-center;
  @apply w-5 h-5;
  @apply rounded;
  @apply text-gray-400;
  @apply transition-all duration-150;
  @apply cursor-pointer;

  svg {
    @apply w-3.5 h-3.5;
  }

  &:hover {
    @apply text-gray-600 bg-gray-50;
  }

  &.active {
    @apply bg-white text-indigo-600;
    @apply shadow-sm;
  }
}

/* ==========================================================================
   Spacing Group (Padding/Margin)
   ========================================================================== */

.spacing-group {
  @apply mb-3;
}

.spacing-group__header {
  @apply flex items-center justify-between;
  @apply mb-2;
}

.spacing-group__breakpoints {
  @apply inline-flex;
  @apply gap-0.5;
  @apply p-0.5;
  @apply bg-gray-100;
  @apply rounded-md;
}

.spacing-group__breakpoint-btn {
  @apply flex items-center justify-center;
  @apply w-5 h-5;
  @apply rounded;
  @apply text-gray-400;
  @apply transition-all duration-150;
  @apply cursor-pointer;

  svg {
    @apply w-3 h-3;
  }

  &:hover {
    @apply text-gray-600 bg-gray-50;
  }

  &.active {
    @apply bg-white text-indigo-600;
    @apply shadow-sm;
  }
}

.spacing-group__inputs {
  @apply flex flex-col items-center;
  @apply gap-1;
  @apply p-3;
  @apply bg-gray-50;
  @apply rounded-lg;
  @apply border border-gray-200;
}

.spacing-group__top,
.spacing-group__bottom {
  @apply w-16;
}

.spacing-group__middle {
  @apply flex items-center justify-center;
  @apply gap-2;
  @apply w-full;
}

.spacing-group__left,
.spacing-group__right {
  @apply w-16;
}

.spacing-group__link-btn {
  @apply flex items-center justify-center;
  @apply w-8 h-8;
  @apply rounded-md;
  @apply text-gray-400;
  @apply bg-white;
  @apply border border-gray-200;
  @apply transition-all duration-150;
  @apply cursor-pointer;

  svg {
    @apply w-4 h-4;
  }

  &:hover {
    @apply text-gray-600 border-gray-300;
  }

  &.active {
    @apply text-indigo-600 border-indigo-200 bg-indigo-50;
  }
}

/* Compact spacing inputs */
.spacing-group__inputs input {
  @apply text-center;
  @apply text-xs;
  @apply p-1.5;
}

