Add SCSS styles for base, components, layouts, and utilities (not on

use)

src/assets/scss/components/_modals.scss

@@ -0,0 +1,256 @@
+// Action Modal Styles
+.action-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  @include flex-center;
+
+  &__backdrop {
+    position: absolute;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &__container {
+    position: relative;
+    background-color: white;
+    border-radius: $radius-2xl;
+    box-shadow: $shadow-xl;
+    max-width: 28rem;
+    width: 100%;
+    margin: 0 $spacing-md;
+    max-height: 90vh;
+    overflow-y: auto;
+  }
+
+  &__header {
+    padding: $spacing-xl;
+    border-bottom: 1px solid $gray-100;
+    @include flex-between;
+
+    h3 {
+      font-size: 1.125rem;
+      font-weight: 500;
+      color: $gray-900;
+      margin: 0;
+    }
+
+    p {
+      font-size: 0.875rem;
+      color: $gray-600;
+      margin: 0;
+    }
+  }
+
+  &__close-button {
+    padding: $spacing-sm;
+    border-radius: 50%;
+    transition: background-color $transition-fast;
+    background: none;
+    border: none;
+    cursor: pointer;
+
+    &:hover {
+      background-color: $gray-100;
+    }
+
+    svg {
+      width: 1.25rem;
+      height: 1.25rem;
+      color: $gray-400;
+    }
+  }
+
+  &__content {
+    padding: $spacing-xl;
+
+    .space-y-4 > * + * {
+      margin-top: $spacing-md;
+    }
+  }
+
+  &__footer {
+    padding: $spacing-xl $spacing-xl $spacing-md;
+    background-color: $gray-50;
+    border-radius: 0 0 $radius-2xl $radius-2xl;
+    display: flex;
+    gap: $spacing-md;
+
+    button {
+      flex: 1;
+      padding: $spacing-sm $spacing-md;
+      border-radius: $radius-lg;
+      font-weight: 500;
+      transition: all $transition-fast;
+
+      &.cancel {
+        @include button-secondary;
+      }
+
+      &.execute {
+        @include button-primary;
+
+        &:disabled {
+          background-color: #93c5fd;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+}
+
+// Range Input Styling
+.range-input {
+  &__container {
+    .space-y-3 > * + * {
+      margin-top: $spacing-md;
+    }
+  }
+
+  &__slider {
+    @include custom-slider;
+  }
+
+  &__labels {
+    @include flex-between;
+    font-size: 0.875rem;
+    color: $gray-600;
+
+    .current-value {
+      font-weight: 500;
+    }
+  }
+
+  &__label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: $gray-700;
+    margin-bottom: $spacing-sm;
+  }
+}
+
+// Option Selection
+.option-selection {
+  &__label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: $gray-700;
+    margin-bottom: $spacing-sm;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: $spacing-sm;
+  }
+
+  &__button {
+    padding: $spacing-md;
+    border: 1px solid $gray-200;
+    border-radius: $radius-lg;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: all $transition-fast;
+    cursor: pointer;
+    background: white;
+    color: $gray-700;
+
+    &:hover {
+      background-color: $gray-50;
+    }
+
+    &.selected {
+      background-color: $primary;
+      color: white;
+      border-color: $primary;
+    }
+  }
+}
+
+// Toggle Control
+.toggle-control {
+  @include flex-between;
+
+  &__label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: $gray-700;
+  }
+
+  &__switch {
+    position: relative;
+    display: inline-flex;
+    height: 1.5rem;
+    width: 2.75rem;
+    align-items: center;
+    border-radius: 9999px;
+    transition: background-color $transition-fast;
+    cursor: pointer;
+    border: none;
+
+    &.on {
+      background-color: $primary;
+    }
+
+    &.off {
+      background-color: $gray-200;
+    }
+  }
+
+  &__thumb {
+    display: inline-block;
+    height: 1rem;
+    width: 1rem;
+    border-radius: 50%;
+    background-color: white;
+    transition: transform $transition-fast;
+
+    &.on {
+      transform: translateX(1.5rem);
+    }
+
+    &.off {
+      transform: translateX(0.25rem);
+    }
+  }
+
+  &__status {
+    font-size: 0.875rem;
+    color: $gray-500;
+    margin-top: $spacing-xs;
+  }
+}
+
+// Trigger Action
+.trigger-action {
+  &__container {
+    background-color: $gray-50;
+    border-radius: $radius-lg;
+    padding: $spacing-md;
+  }
+
+  &__content {
+    @include flex-center;
+    gap: $spacing-md;
+
+    .icon {
+      font-size: 2rem;
+    }
+
+    .info {
+      .title {
+        font-weight: 500;
+        color: $gray-900;
+        margin: 0;
+      }
+
+      .description {
+        font-size: 0.875rem;
+        color: $gray-600;
+        margin: 0;
+      }
+    }
+  }
+}