pure-react-ui 1.5.4 → 1.5.6

package/lib/components/Modal/Modal.css

@@ -1,509 +1,509 @@
-/* Global Font Family - Applied to Modal */
-.pure-modal,
-.pure-modal * {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* Pure Modal Component Styles */
-.pure-modal__overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-  padding: 1rem;
-  animation: pure-modal-overlay-fade-in 0.2s ease-out;
-  overflow-y: auto;
-}
-
-@keyframes pure-modal-overlay-fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.pure-modal {
-  background-color: #ffffff;
-  border-radius: 0.5rem;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  display: flex;
-  flex-direction: column;
-  max-height: 90vh;
-  width: 100%;
-  animation: pure-modal-slide-in 0.3s ease-out;
-  position: relative;
-  overflow: hidden;
-  margin: 0 auto;
-}
-
-@keyframes pure-modal-slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(-20px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-/* Position Variants */
-.pure-modal--position-center {
-  /* Default - already centered by overlay */
-}
-
-.pure-modal--position-top {
-  margin-top: 2rem;
-  margin-bottom: auto;
-}
-
-.pure-modal--position-bottom {
-  margin-top: auto;
-  margin-bottom: 2rem;
-}
-
-.pure-modal--position-left {
-  margin-left: 2rem;
-  margin-right: auto;
-}
-
-.pure-modal--position-right {
-  margin-left: auto;
-  margin-right: 2rem;
-}
-
-.pure-modal--position-top-left {
-  margin-top: 2rem;
-  margin-bottom: auto;
-  margin-left: 2rem;
-  margin-right: auto;
-}
-
-.pure-modal--position-top-right {
-  margin-top: 2rem;
-  margin-bottom: auto;
-  margin-left: auto;
-  margin-right: 2rem;
-}
-
-.pure-modal--position-bottom-left {
-  margin-top: auto;
-  margin-bottom: 2rem;
-  margin-left: 2rem;
-  margin-right: auto;
-}
-
-.pure-modal--position-bottom-right {
-  margin-top: auto;
-  margin-bottom: 2rem;
-  margin-left: auto;
-  margin-right: 2rem;
-}
-
-/* Size Variants */
-.pure-modal--small {
-  max-width: 400px;
-}
-
-.pure-modal--medium {
-  max-width: 600px;
-}
-
-.pure-modal--large {
-  max-width: 900px;
-}
-
-.pure-modal--fullscreen {
-  max-width: 100%;
-  max-height: 100vh;
-  height: 100vh;
-  border-radius: 0;
-  margin: 0;
-}
-
-/* Variant Colors */
-.pure-modal--default {
-  background-color: #ffffff;
-}
-
-.pure-modal--primary {
-  background: linear-gradient(to bottom, #007bff 0%, #0056b3 100%);
-  color: #ffffff;
-}
-
-.pure-modal--primary .pure-modal__header {
-  border-bottom-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--primary .pure-modal__title {
-  color: #ffffff;
-}
-
-.pure-modal--primary .pure-modal__body {
-  color: #ffffff;
-}
-
-.pure-modal--primary .pure-modal__close-button {
-  color: #ffffff;
-}
-
-.pure-modal--primary .pure-modal__close-button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-  color: #ffffff;
-}
-
-.pure-modal--secondary {
-  background: linear-gradient(to bottom, #6c757d 0%, #545b62 100%);
-  color: #ffffff;
-}
-
-.pure-modal--secondary .pure-modal__header {
-  border-bottom-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--secondary .pure-modal__title,
-.pure-modal--secondary .pure-modal__body,
-.pure-modal--secondary .pure-modal__close-button {
-  color: #ffffff;
-}
-
-.pure-modal--secondary .pure-modal__close-button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--success {
-  background: linear-gradient(to bottom, #28a745 0%, #218838 100%);
-  color: #ffffff;
-}
-
-.pure-modal--success .pure-modal__header {
-  border-bottom-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--success .pure-modal__title,
-.pure-modal--success .pure-modal__body,
-.pure-modal--success .pure-modal__close-button {
-  color: #ffffff;
-}
-
-.pure-modal--success .pure-modal__close-button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--danger {
-  background: linear-gradient(to bottom, #dc3545 0%, #c82333 100%);
-  color: #ffffff;
-}
-
-.pure-modal--danger .pure-modal__header {
-  border-bottom-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--danger .pure-modal__title,
-.pure-modal--danger .pure-modal__body,
-.pure-modal--danger .pure-modal__close-button {
-  color: #ffffff;
-}
-
-.pure-modal--danger .pure-modal__close-button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--warning {
-  background: linear-gradient(to bottom, #ffc107 0%, #e0a800 100%);
-  color: #212529;
-}
-
-.pure-modal--warning .pure-modal__header {
-  border-bottom-color: rgba(0, 0, 0, 0.1);
-}
-
-.pure-modal--warning .pure-modal__title,
-.pure-modal--warning .pure-modal__body {
-  color: #212529;
-}
-
-.pure-modal--warning .pure-modal__close-button {
-  color: #212529;
-}
-
-.pure-modal--warning .pure-modal__close-button:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.pure-modal--info {
-  background: linear-gradient(to bottom, #17a2b8 0%, #138496 100%);
-  color: #ffffff;
-}
-
-.pure-modal--info .pure-modal__header {
-  border-bottom-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--info .pure-modal__title,
-.pure-modal--info .pure-modal__body,
-.pure-modal--info .pure-modal__close-button {
-  color: #ffffff;
-}
-
-.pure-modal--info .pure-modal__close-button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-/* Gradient Variants */
-.pure-modal--gradient-primary {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: #ffffff;
-}
-
-.pure-modal--gradient-primary .pure-modal__header {
-  border-bottom-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--gradient-primary .pure-modal__title,
-.pure-modal--gradient-primary .pure-modal__body,
-.pure-modal--gradient-primary .pure-modal__close-button {
-  color: #ffffff;
-}
-
-.pure-modal--gradient-primary .pure-modal__close-button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--gradient-success {
-  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-  color: #ffffff;
-}
-
-.pure-modal--gradient-success .pure-modal__header {
-  border-bottom-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--gradient-success .pure-modal__title,
-.pure-modal--gradient-success .pure-modal__body,
-.pure-modal--gradient-success .pure-modal__close-button {
-  color: #ffffff;
-}
-
-.pure-modal--gradient-success .pure-modal__close-button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--gradient-danger {
-  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-  color: #ffffff;
-}
-
-.pure-modal--gradient-danger .pure-modal__header {
-  border-bottom-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--gradient-danger .pure-modal__title,
-.pure-modal--gradient-danger .pure-modal__body,
-.pure-modal--gradient-danger .pure-modal__close-button {
-  color: #ffffff;
-}
-
-.pure-modal--gradient-danger .pure-modal__close-button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--gradient-info {
-  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-  color: #ffffff;
-}
-
-.pure-modal--gradient-info .pure-modal__header {
-  border-bottom-color: rgba(255, 255, 255, 0.2);
-}
-
-.pure-modal--gradient-info .pure-modal__title,
-.pure-modal--gradient-info .pure-modal__body,
-.pure-modal--gradient-info .pure-modal__close-button {
-  color: #ffffff;
-}
-
-.pure-modal--gradient-info .pure-modal__close-button:hover {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-/* Header */
-.pure-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1.5rem;
-  border-bottom: 1px solid #e0e0e0;
-  flex-shrink: 0;
-  background: inherit;
-}
-
-.pure-modal__title-wrapper {
-  flex: 1;
-}
-
-.pure-modal__title {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.4;
-  color: #212529;
-}
-
-.pure-modal__close-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-  margin-left: 1rem;
-  background: transparent;
-  border: none;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  color: #6c757d;
-  transition: all 0.2s ease-in-out;
-  flex-shrink: 0;
-}
-
-.pure-modal__close-button:hover {
-  background-color: #f0f0f0;
-  color: #212529;
-}
-
-.pure-modal__close-button:active {
-  background-color: #e0e0e0;
-}
-
-.pure-modal__close-button:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
-}
-
-.pure-modal__close-icon {
-  font-size: 1.5rem;
-  line-height: 1;
-  font-weight: 300;
-}
-
-/* Body */
-.pure-modal__body {
-  padding: 1.5rem;
-  flex: 1;
-  color: #495057;
-  line-height: 1.6;
-  background: inherit;
-}
-
-.pure-modal--scrollable .pure-modal__body {
-  overflow-y: auto;
-  max-height: calc(90vh - 100px);
-}
-
-.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar {
-  width: 8px;
-}
-
-.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.05);
-  border-radius: 4px;
-}
-
-.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-}
-
-.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.3);
-}
-
-/* Scrollable variants with custom scrollbar colors */
-.pure-modal--primary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
-.pure-modal--secondary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
-.pure-modal--success.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
-.pure-modal--danger.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
-.pure-modal--info.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
-.pure-modal--gradient-primary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
-.pure-modal--gradient-success.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
-.pure-modal--gradient-danger.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
-.pure-modal--gradient-info.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.pure-modal--primary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
-.pure-modal--secondary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
-.pure-modal--success.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
-.pure-modal--danger.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
-.pure-modal--info.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
-.pure-modal--gradient-primary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
-.pure-modal--gradient-success.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
-.pure-modal--gradient-danger.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
-.pure-modal--gradient-info.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .pure-modal__overlay {
-    padding: 0;
-    align-items: flex-end;
-  }
-
-  .pure-modal {
-    max-height: 95vh;
-    border-radius: 0.5rem 0.5rem 0 0;
-    animation: pure-modal-slide-up 0.3s ease-out;
-  }
-
-  @keyframes pure-modal-slide-up {
-    from {
-      opacity: 0;
-      transform: translateY(100%);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .pure-modal--small,
-  .pure-modal--medium,
-  .pure-modal--large {
-    max-width: 100%;
-  }
-
-  .pure-modal--position-top,
-  .pure-modal--position-bottom,
-  .pure-modal--position-left,
-  .pure-modal--position-right,
-  .pure-modal--position-top-left,
-  .pure-modal--position-top-right,
-  .pure-modal--position-bottom-left,
-  .pure-modal--position-bottom-right {
-    margin: 0;
-  }
-
-  .pure-modal__header {
-    padding: 1rem 1.25rem;
-  }
-
-  .pure-modal__title {
-    font-size: 1.25rem;
-  }
-
-  .pure-modal__body {
-    padding: 1.25rem;
-  }
-}
+/* Global Font Family - Applied to Modal */
+.pure-modal,
+.pure-modal * {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Pure Modal Component Styles */
+.pure-modal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+  animation: pure-modal-overlay-fade-in 0.2s ease-out;
+  overflow-y: auto;
+}
+
+@keyframes pure-modal-overlay-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.pure-modal {
+  background-color: #ffffff;
+  border-radius: 0.5rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  width: 100%;
+  animation: pure-modal-slide-in 0.3s ease-out;
+  position: relative;
+  overflow: hidden;
+  margin: 0 auto;
+}
+
+@keyframes pure-modal-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Position Variants */
+.pure-modal--position-center {
+  /* Default - already centered by overlay */
+}
+
+.pure-modal--position-top {
+  margin-top: 2rem;
+  margin-bottom: auto;
+}
+
+.pure-modal--position-bottom {
+  margin-top: auto;
+  margin-bottom: 2rem;
+}
+
+.pure-modal--position-left {
+  margin-left: 2rem;
+  margin-right: auto;
+}
+
+.pure-modal--position-right {
+  margin-left: auto;
+  margin-right: 2rem;
+}
+
+.pure-modal--position-top-left {
+  margin-top: 2rem;
+  margin-bottom: auto;
+  margin-left: 2rem;
+  margin-right: auto;
+}
+
+.pure-modal--position-top-right {
+  margin-top: 2rem;
+  margin-bottom: auto;
+  margin-left: auto;
+  margin-right: 2rem;
+}
+
+.pure-modal--position-bottom-left {
+  margin-top: auto;
+  margin-bottom: 2rem;
+  margin-left: 2rem;
+  margin-right: auto;
+}
+
+.pure-modal--position-bottom-right {
+  margin-top: auto;
+  margin-bottom: 2rem;
+  margin-left: auto;
+  margin-right: 2rem;
+}
+
+/* Size Variants */
+.pure-modal--small {
+  max-width: 400px;
+}
+
+.pure-modal--medium {
+  max-width: 600px;
+}
+
+.pure-modal--large {
+  max-width: 900px;
+}
+
+.pure-modal--fullscreen {
+  max-width: 100%;
+  max-height: 100vh;
+  height: 100vh;
+  border-radius: 0;
+  margin: 0;
+}
+
+/* Variant Colors */
+.pure-modal--default {
+  background-color: #ffffff;
+}
+
+.pure-modal--primary {
+  background: linear-gradient(to bottom, #007bff 0%, #0056b3 100%);
+  color: #ffffff;
+}
+
+.pure-modal--primary .pure-modal__header {
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--primary .pure-modal__title {
+  color: #ffffff;
+}
+
+.pure-modal--primary .pure-modal__body {
+  color: #ffffff;
+}
+
+.pure-modal--primary .pure-modal__close-button {
+  color: #ffffff;
+}
+
+.pure-modal--primary .pure-modal__close-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: #ffffff;
+}
+
+.pure-modal--secondary {
+  background: linear-gradient(to bottom, #6c757d 0%, #545b62 100%);
+  color: #ffffff;
+}
+
+.pure-modal--secondary .pure-modal__header {
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--secondary .pure-modal__title,
+.pure-modal--secondary .pure-modal__body,
+.pure-modal--secondary .pure-modal__close-button {
+  color: #ffffff;
+}
+
+.pure-modal--secondary .pure-modal__close-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--success {
+  background: linear-gradient(to bottom, #28a745 0%, #218838 100%);
+  color: #ffffff;
+}
+
+.pure-modal--success .pure-modal__header {
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--success .pure-modal__title,
+.pure-modal--success .pure-modal__body,
+.pure-modal--success .pure-modal__close-button {
+  color: #ffffff;
+}
+
+.pure-modal--success .pure-modal__close-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--danger {
+  background: linear-gradient(to bottom, #dc3545 0%, #c82333 100%);
+  color: #ffffff;
+}
+
+.pure-modal--danger .pure-modal__header {
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--danger .pure-modal__title,
+.pure-modal--danger .pure-modal__body,
+.pure-modal--danger .pure-modal__close-button {
+  color: #ffffff;
+}
+
+.pure-modal--danger .pure-modal__close-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--warning {
+  background: linear-gradient(to bottom, #ffc107 0%, #e0a800 100%);
+  color: #212529;
+}
+
+.pure-modal--warning .pure-modal__header {
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+.pure-modal--warning .pure-modal__title,
+.pure-modal--warning .pure-modal__body {
+  color: #212529;
+}
+
+.pure-modal--warning .pure-modal__close-button {
+  color: #212529;
+}
+
+.pure-modal--warning .pure-modal__close-button:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.pure-modal--info {
+  background: linear-gradient(to bottom, #17a2b8 0%, #138496 100%);
+  color: #ffffff;
+}
+
+.pure-modal--info .pure-modal__header {
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--info .pure-modal__title,
+.pure-modal--info .pure-modal__body,
+.pure-modal--info .pure-modal__close-button {
+  color: #ffffff;
+}
+
+.pure-modal--info .pure-modal__close-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Gradient Variants */
+.pure-modal--gradient-primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: #ffffff;
+}
+
+.pure-modal--gradient-primary .pure-modal__header {
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--gradient-primary .pure-modal__title,
+.pure-modal--gradient-primary .pure-modal__body,
+.pure-modal--gradient-primary .pure-modal__close-button {
+  color: #ffffff;
+}
+
+.pure-modal--gradient-primary .pure-modal__close-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--gradient-success {
+  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+  color: #ffffff;
+}
+
+.pure-modal--gradient-success .pure-modal__header {
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--gradient-success .pure-modal__title,
+.pure-modal--gradient-success .pure-modal__body,
+.pure-modal--gradient-success .pure-modal__close-button {
+  color: #ffffff;
+}
+
+.pure-modal--gradient-success .pure-modal__close-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--gradient-danger {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  color: #ffffff;
+}
+
+.pure-modal--gradient-danger .pure-modal__header {
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--gradient-danger .pure-modal__title,
+.pure-modal--gradient-danger .pure-modal__body,
+.pure-modal--gradient-danger .pure-modal__close-button {
+  color: #ffffff;
+}
+
+.pure-modal--gradient-danger .pure-modal__close-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--gradient-info {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: #ffffff;
+}
+
+.pure-modal--gradient-info .pure-modal__header {
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+.pure-modal--gradient-info .pure-modal__title,
+.pure-modal--gradient-info .pure-modal__body,
+.pure-modal--gradient-info .pure-modal__close-button {
+  color: #ffffff;
+}
+
+.pure-modal--gradient-info .pure-modal__close-button:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Header */
+.pure-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e0e0e0;
+  flex-shrink: 0;
+  background: inherit;
+}
+
+.pure-modal__title-wrapper {
+  flex: 1;
+}
+
+.pure-modal__title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: #212529;
+}
+
+.pure-modal__close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  margin-left: 1rem;
+  background: transparent;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  color: #6c757d;
+  transition: all 0.2s ease-in-out;
+  flex-shrink: 0;
+}
+
+.pure-modal__close-button:hover {
+  background-color: #f0f0f0;
+  color: #212529;
+}
+
+.pure-modal__close-button:active {
+  background-color: #e0e0e0;
+}
+
+.pure-modal__close-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
+}
+
+.pure-modal__close-icon {
+  font-size: 1.5rem;
+  line-height: 1;
+  font-weight: 300;
+}
+
+/* Body */
+.pure-modal__body {
+  padding: 1.5rem;
+  flex: 1;
+  color: #495057;
+  line-height: 1.6;
+  background: inherit;
+}
+
+.pure-modal--scrollable .pure-modal__body {
+  overflow-y: auto;
+  max-height: calc(90vh - 100px);
+}
+
+.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar {
+  width: 8px;
+}
+
+.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 4px;
+}
+
+.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+}
+
+.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.3);
+}
+
+/* Scrollable variants with custom scrollbar colors */
+.pure-modal--primary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
+.pure-modal--secondary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
+.pure-modal--success.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
+.pure-modal--danger.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
+.pure-modal--info.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
+.pure-modal--gradient-primary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
+.pure-modal--gradient-success.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
+.pure-modal--gradient-danger.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb,
+.pure-modal--gradient-info.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+.pure-modal--primary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
+.pure-modal--secondary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
+.pure-modal--success.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
+.pure-modal--danger.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
+.pure-modal--info.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
+.pure-modal--gradient-primary.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
+.pure-modal--gradient-success.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
+.pure-modal--gradient-danger.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover,
+.pure-modal--gradient-info.pure-modal--scrollable .pure-modal__body::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .pure-modal__overlay {
+    padding: 0;
+    align-items: flex-end;
+  }
+
+  .pure-modal {
+    max-height: 95vh;
+    border-radius: 0.5rem 0.5rem 0 0;
+    animation: pure-modal-slide-up 0.3s ease-out;
+  }
+
+  @keyframes pure-modal-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(100%);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .pure-modal--small,
+  .pure-modal--medium,
+  .pure-modal--large {
+    max-width: 100%;
+  }
+
+  .pure-modal--position-top,
+  .pure-modal--position-bottom,
+  .pure-modal--position-left,
+  .pure-modal--position-right,
+  .pure-modal--position-top-left,
+  .pure-modal--position-top-right,
+  .pure-modal--position-bottom-left,
+  .pure-modal--position-bottom-right {
+    margin: 0;
+  }
+
+  .pure-modal__header {
+    padding: 1rem 1.25rem;
+  }
+
+  .pure-modal__title {
+    font-size: 1.25rem;
+  }
+
+  .pure-modal__body {
+    padding: 1.25rem;
+  }
+}