npm - @e-llm-studio/instant-learning - Versions diffs - 0.0.239 → 0.0.241 - Mend

@e-llm-studio/instant-learning 0.0.239 → 0.0.241

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (535) hide show

package/dist/features/IL-OTJ/_components/ILPopup.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-var n="\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Plus Jakarta Sans', sans-serif !important;\n  }\n\n  .form-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.78rem;\n    border-bottom: 1px solid #e5e7eb;\n    color: #0F172A;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 12px;\n    position: sticky;\n    top: 0;\n    z-index: 10;\n  }\n\n  .form-header svg {\n    cursor: pointer;\n    transition: opacity 0.2s ease;\n  }\n\n  .form-header svg:hover {\n    opacity: 0.7;\n  }\n\n  .il-popup-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n  }\n  \n  .sections-space {\n    display: grid;\n    gap: 1rem;\n    margin-bottom: 2rem;\n  }\n\n  .section-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    background-color: white;\n    overflow: hidden;\n    font-family: 'Plus Jakarta Sans', sans-serif;\n  }\n\n  .section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    transition: all 150ms ease-in-out;\n    background-color: white;\n  }\n\n  .section-header-title {\n    display: flex;\n    align-items: center;\n    font-weight: 500;\n    font-size: 14px;\n    color: #19213D;\n    transition: color 150ms ease-in-out;\n  }\n\n  .section-chevron {\n    width: 24px;\n    height: 24px;\n    color: #19213D;\n    transition: transform 300ms ease-in-out, color 300ms ease-in-out;\n  }\n\n  .section-chevron.open {\n    transform: rotate(180deg);\n  }\n\n  .section-divider {\n    border: none;\n    border-top: 2px solid #F0F2F5;\n  }\n\n  .section-content {\n    animation: slideInFromTop 200ms ease-in-out;\n  }\n\n  .textarea-wrapper {\n  }\n\n  .textarea {\n    width: 100%;\n    padding: 20px;\n    border: 1px solid #d1d5db;\n    border-radius: 0.675rem;\n    resize: none;\n    font-size: .875rem;\n    font-weight: 400;\n    font-family: inherit;\n    transition: border-color 150ms ease-in-out;\n  }\n\n  .textarea {\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none;  /* IE/Edge */\n  }\n\n  .textarea::-webkit-scrollbar {\n    display: none; /* Chrome/Safari */\n  }\n\n  .condition-wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .condition-item {\n    display: flex;\n    align-items: start;\n    justify-content: space-between;\n    background-color: white;\n    border-radius: 0.675rem;\n    transition: border-color 0.2s ease;\n    gap: 8px;\n  }\n\n  .condition-left {\n    display: flex;\n    align-items: flex-start;\n    flex: 1;\n  }\n\n  .condition-index {\n    font-size: 14px;\n    color: #64748B;\n    margin-right: 8px;\n    min-width: 20px;\n    padding-top: 2px;\n  }\n\n  .condition-text {\n    flex: 1;\n    border: none;\n    font-size: 0.875rem;\n    color: #1e293b;\n    background: transparent;\n    resize: none; \n    overflow: hidden;\n    line-height: 1.5;\n    padding: 0;\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;     \n    word-wrap: break-word;    \n    overflow-wrap: break-word;\n  }\n\n  .condition-text:focus {\n    outline: none;\n  }\n\n  .action-buttons {\n    display: flex;\n    gap: 8px;\n    margin-top: 2px;\n  }\n\n  .btn-icon {\n    background: transparent !important;\n    border: 1px solid #ccc;\n    cursor: pointer;\n    padding: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    transition: background-color 0.2s;\n  }\n\n  .btn-icon:hover {\n    background-color: #f9fafb !important;\n  }\n\n  .btn-save { color: #22c55e; }    /* Green Check */\n  .btn-cancel { color: #ef4444; }  /* Red Cross */\n  .btn-edit { color: #64748B; }    /* Grey Pencil */\n  .btn-delete { color: #64748B; }  /* Grey Trash */\n\n  .btn-delete:hover { color: #ef4444; }\n\n  .condition-add {\n    display: flex;\n    align-items: center;\n    padding: 8px 0;\n    cursor: pointer;\n    color: #2563EB;\n    width: fit-content;\n  }\n\n  .condition-remove-btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: #9ca3af;\n    transition: color 200ms ease-in-out;\n    padding: 0;\n    display: flex;\n    align-items: center;\n  }\n\n  .condition-remove-btn:hover {\n    color: #ef4444;\n  }\n\n  .condition-add-icon {\n    width: 20px;\n    height: 20px;\n    margin-right: 8px;\n  }\n\n  .condition-add-text {\n    font-weight: 500;\n    font-size: 0.875rem;\n  }\n\n  .scope-content {\n    display: flex;\n     justify-content: space-between;\n    gap: 16px;\n  }\n\n  @media (min-width: 640px) {\n    .scope-content {\n      grid-template-columns: 1fr 1fr;\n    }\n  }\n\n  .form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .form-label {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #19213D;\n    transition: color 150ms ease-in-out;\n  }\n  .readOnly {\n    color: #9CA3AF;\n    cursor: not-allowed;\n}\n\n  .dropdown {\n    width: 200px;\n    padding: 7px 10.5px 7px 10.5px;\n    border: 1px solid #64748B;\n    color: #64748B;\n    border-radius: 8px;\n    background-color: white;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n    transition: all 150ms ease-in-out;\n    font-size: 0.875rem;\n\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    \n    background-position: calc(100% - 12px) center; \n    background-size: 16px;\n  }\n  .checkbox-group {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n  }\n\n  .checkbox-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n  }\n\n.checkbox-input {\n  appearance: none;\n  -webkit-appearance: none;\n  \n  width: 16px;\n  height: 16px;\n  \n  border: 1px solid #D1D5DB; \n  border-radius: 4px;        \n  background-color: white;   \n  cursor: pointer;\n  position: relative;\n  display: grid;\n  place-content: center;\n}\n\n.checkbox-input:checked {\n  background-color: #2563EB;\n  border-color: #2563EB;\n}\n\n.checkbox-input:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  clipPath: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);\n  background-color: white;\n}\n\n  .checkbox-label {\n    font-size: 0.875rem;\n    color: #374151;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .config-content {\n    padding: 8px;\n  }\n\n  .config-content-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 16px 0;\n  }\n\n  .separation-row-container {\n    background: #F7F8FA99;\n    border: 1px solid #F5F6F7;\n    border-radius: 8px;\n    padding: 10px 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .separation-header-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .separation-label {\n    font-size: 16px;\n    font-weight: 500;\n    color: #19213D;\n  }\n\n  .separation-controls-row {\n    display: flex;\n    align-items: center;\n  }\n\n  .duration-input-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .separation-input:disabled {\n    background: transparent;\n    border-color: transparent;\n    color: #64748B;\n  }\n\n  .separation-unit {\n    font-size: 16px;\n    color: #64748B;\n  }\n\n  .toggle-switch {\n    position: relative;\n    display: inline-flex;\n    height: 24px;\n    width: 44px;\n    flex-shrink: 0;\n    cursor: pointer;\n    border-radius: 9999px;\n    border: 2px solid transparent;\n    transition: background-color 200ms ease-in-out;\n    background-color: #e5e7eb;\n    appearance: none;\n    padding: 0;\n  }\n\n  .toggle-switch.enabled {\n    background-color: #2563eb;\n  }\n\n  .toggle-switch::after {\n    content: '';\n    position: absolute;\n    pointer-events: none;\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n    transform: translateX(2px);\n    border-radius: 9999px;\n    background-color: white;\n    box-shadow: 0 0 0 0;\n    transition: transform 200ms ease-in-out;\n  }\n\n  .toggle-switch.enabled::after {\n    transform: translateX(22px);\n  }\n\n  .separation-input {\n    width: 48px;\n    text-align: center;\n    padding: 4px;\n    border: 1px solid #d1d5db;\n    border-radius: 6px;\n    font-size: 0.875rem;\n  }\n\n  .separation-unit {\n    font-size: 0.875rem;\n    color: #6b7280;\n  }\n\n  .code-toggle-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding-top: 12px;\n    padding-bottom: 12px;\n  }\n\n  .config-section-divider {\n    padding-top: 12px;\n  }\n\n  .save-button-container {\n    background-color: white;\n    padding: 16px;\n    display: flex;\n    gap: 12px;\n  }\n\n  .save-button {\n    width: 100%;\n    margin-left: auto;\n    background-color: #2563eb;\n    color: white;\n    padding: 8.25px 12.25px;\n    border-radius: 8px;\n    border: none;\n    cursor: pointer;\n    transition: background-color 150ms ease-in-out;\n    font-size: 0.875rem;\n  }\n\n  .save-button:hover {\n    background-color: #1055e8;\n  }\n\n  .save-button:active {\n    background-color: #2563eb;\n  }\n\n  .save-button:disabled {\n    background-color: #93c5fd; \n    cursor: not-allowed;\n  }\n\n  .save-button-secondary {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: white;\n    color: #8F2C23;\n    padding: 8.25px 12.25px;\n    border-radius: 8px;\n    border: 1px solid #E2E8F0;\n    cursor: pointer;\n    transition: all 150ms ease-in-out;\n    font-size: 0.875rem;\n  }\n\n  .save-button-secondary:hover {\n    background-color: #F8FAFC;\n    color: #8F2C23;\n    border-color: #CBD5E1;\n  }\n\n  .save-button-secondary:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n    background-color: #F3F4F6;\n    color: #9CA3AF;\n    border-color: #E5E7EB;\n  }\n    \n  .traffic-manager-template {\n    display: flex;\n    flex-direction: column;\n    gap: 18px;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .no-scrollbar::-webkit-scrollbar {\n      display: none; /* Chrome, Safari, and Opera */\n  }\n\n  .no-scrollbar {\n      -ms-overflow-style: none;  /* IE and Edge */\n      scrollbar-width: none;  /* Firefox */\n  }\n  @keyframes scrollToBottom {\n    0% { transform: translateY(0px); }\n    50% { transform: translateY(10px); }\n    100% { transform: translateY(0px); }\n  }\n\n  /* The animation class */\n  .animate-scrollToBottom {\n    animation: scrollToBottom 1s infinite ease-in-out;\n  }\n    /* Accordion stylings */\n  .accordion-container {\n    width: 100%;\n    border: 1px solid #ccc;\n    border-radius: 8px;\n    background-color: #ffffff;\n    overflow: hidden;\n  }\n\n  .accordion-header {\n    padding: 12px 16px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .accordion-title {\n    margin: 0;\n    font-size: 12px;\n    font-weight: 500;\n    color: #19213d;\n  }\n\n  .accordion-content {\n    padding: 0 24px 24px 24px;\n  }\n\n";export{n as componentStyles};
+var n="\n  * {\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n    font-family: 'Plus Jakarta Sans', sans-serif !important;\n  }\n\n  .form-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0.78rem;\n    border-bottom: 1px solid #e5e7eb;\n    color: #0F172A;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 12px;\n    position: sticky;\n    top: 0;\n    z-index: 10;\n  }\n\n  .form-header svg {\n    cursor: pointer;\n    transition: opacity 0.2s ease;\n  }\n\n  .form-header svg:hover {\n    opacity: 0.7;\n  }\n\n  .il-popup-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n  }\n  \n  .sections-space {\n    display: grid;\n    gap: 1rem;\n    margin-bottom: 2rem;\n  }\n\n  .section-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    background-color: white;\n    overflow: hidden;\n    font-family: 'Plus Jakarta Sans', sans-serif;\n  }\n\n  .section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    transition: all 150ms ease-in-out;\n    background-color: white;\n  }\n\n  .section-header-title {\n    display: flex;\n    align-items: center;\n    font-weight: 500;\n    font-size: 14px;\n    color: #19213D;\n    transition: color 150ms ease-in-out;\n  }\n\n  .section-chevron {\n    width: 24px;\n    height: 24px;\n    color: #19213D;\n    transition: transform 300ms ease-in-out, color 300ms ease-in-out;\n  }\n\n  .section-chevron.open {\n    transform: rotate(180deg);\n  }\n\n  .section-divider {\n    border: none;\n    border-top: 2px solid #F0F2F5;\n  }\n\n  .section-content {\n    animation: slideInFromTop 200ms ease-in-out;\n  }\n\n  .textarea-wrapper {\n  }\n\n  .textarea {\n    width: 100%;\n    padding: 20px;\n    border: 1px solid #d1d5db;\n    border-radius: 0.675rem;\n    resize: none;\n    font-size: .875rem;\n    font-weight: 400;\n    font-family: inherit;\n    transition: border-color 150ms ease-in-out;\n  }\n\n  .textarea {\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none;  /* IE/Edge */\n  }\n\n  .textarea::-webkit-scrollbar {\n    display: none; /* Chrome/Safari */\n  }\n\n  .condition-wrapper {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .condition-item {\n    display: flex;\n    align-items: start;\n    justify-content: space-between;\n    background-color: white;\n    border-radius: 0.675rem;\n    transition: border-color 0.2s ease;\n    gap: 8px;\n  }\n\n  .condition-left {\n    display: flex;\n    align-items: flex-start;\n    flex: 1;\n  }\n\n  .condition-index {\n    font-size: 14px;\n    color: #64748B;\n    margin-right: 8px;\n    min-width: 20px;\n    padding-top: 2px;\n  }\n\n  .condition-text {\n    flex: 1;\n    border: none;\n    font-size: 0.875rem;\n    color: #1e293b;\n    background: transparent;\n    resize: none; \n    overflow: hidden;\n    line-height: 1.5;\n    padding: 0;\n    display: block;\n    width: 100%;\n    white-space: pre-wrap;     \n    word-wrap: break-word;    \n    overflow-wrap: break-word;\n  }\n\n  .condition-text:focus {\n    outline: none;\n  }\n\n  .action-buttons {\n    display: flex;\n    gap: 8px;\n    margin-top: 2px;\n  }\n\n  .btn-icon {\n    background: transparent !important;\n    border: 1px solid #ccc;\n    cursor: pointer;\n    padding: 0.5rem;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    transition: background-color 0.2s;\n  }\n\n  .btn-icon:hover {\n    background-color: #f9fafb !important;\n  }\n\n  .btn-save { color: #22c55e; }    /* Green Check */\n  .btn-cancel { color: #ef4444; }  /* Red Cross */\n  .btn-edit { color: #64748B; }    /* Grey Pencil */\n  .btn-delete { color: #64748B; }  /* Grey Trash */\n\n  .btn-delete:hover { color: #ef4444; }\n\n  .action-buttons-inline {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    align-items: center;\n  }\n\n  /* The Blue \"Apply\" button style */\n  .btn-apply {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    padding: 8px 12px;\n    border: 1px solid #2563EB;\n    border-radius: 8px;\n    cursor: pointer;\n    height: 36px;\n    background-color: #2563EB !important;\n    color: white !important;\n    font-size: 14px;\n    font-weight: 500;\n    transition: background-color 0.2s;\n  }\n\n  .btn-apply:hover {\n    background-color: #1d4ed8 !important;\n  }\n\n  /* The Cancel (X) button style */\n  .btn-cancel-inline {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    padding: 8px;\n    border: 1px solid #E3E8E9;\n    border-radius: 8px;\n    cursor: pointer;\n    background-color: #ffffff !important;\n    color: #dc2626 !important;\n    transition: all 0.2s;\n  }\n\n  .btn-cancel-inline:hover {\n    background-color: #fef2f2 !important;\n    border-color: #fecaca;\n  }\n\n  /* Ensure the Lucide icons within these buttons behave */\n  .btn-apply svg, .btn-cancel-inline svg {\n    flex-shrink: 0;\n  }\n\n  .condition-add {\n    display: flex;\n    align-items: center;\n    padding: 8px 0;\n    cursor: pointer;\n    color: #2563EB;\n    width: fit-content;\n  }\n\n  .condition-remove-btn {\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: #9ca3af;\n    transition: color 200ms ease-in-out;\n    padding: 0;\n    display: flex;\n    align-items: center;\n  }\n\n  .condition-remove-btn:hover {\n    color: #ef4444;\n  }\n\n  .condition-add-icon {\n    width: 20px;\n    height: 20px;\n    margin-right: 8px;\n  }\n\n  .condition-add-text {\n    font-weight: 500;\n    font-size: 0.875rem;\n  }\n\n  .scope-content {\n    display: flex;\n     justify-content: space-between;\n    gap: 16px;\n  }\n\n  @media (min-width: 640px) {\n    .scope-content {\n      grid-template-columns: 1fr 1fr;\n    }\n  }\n\n  .form-group {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n  }\n\n  .form-label {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #19213D;\n    transition: color 150ms ease-in-out;\n  }\n  .readOnly {\n    color: #9CA3AF;\n    cursor: not-allowed;\n}\n\n  .dropdown {\n    width: 200px;\n    padding: 7px 10.5px 7px 10.5px;\n    border: 1px solid #64748B;\n    color: #64748B;\n    border-radius: 8px;\n    background-color: white;\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n    transition: all 150ms ease-in-out;\n    font-size: 0.875rem;\n\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n\n    background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E\");\n    background-repeat: no-repeat;\n    \n    background-position: calc(100% - 12px) center; \n    background-size: 16px;\n  }\n  .checkbox-group {\n    display: flex;\n    gap: 24px;\n    align-items: center;\n  }\n\n  .checkbox-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n  }\n\n.checkbox-input {\n  appearance: none;\n  -webkit-appearance: none;\n  \n  width: 16px;\n  height: 16px;\n  \n  border: 1px solid #D1D5DB; \n  border-radius: 4px;        \n  background-color: white;   \n  cursor: pointer;\n  position: relative;\n  display: grid;\n  place-content: center;\n}\n\n.checkbox-input:checked {\n  background-color: #2563EB;\n  border-color: #2563EB;\n}\n\n.checkbox-input:checked::before {\n  content: \"\";\n  width: 10px;\n  height: 10px;\n  clipPath: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);\n  background-color: white;\n}\n\n  .checkbox-label {\n    font-size: 0.875rem;\n    color: #374151;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .config-content {\n    padding: 8px;\n  }\n\n  .config-content-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 16px 0;\n  }\n\n  .separation-row-container {\n    background: #F7F8FA99;\n    border: 1px solid #F5F6F7;\n    border-radius: 8px;\n    padding: 10px 16px;\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .separation-header-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .separation-label {\n    font-size: 16px;\n    font-weight: 500;\n    color: #19213D;\n  }\n\n  .separation-controls-row {\n    display: flex;\n    align-items: center;\n  }\n\n  .duration-input-wrapper {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .separation-input:disabled {\n    background: transparent;\n    border-color: transparent;\n    color: #64748B;\n  }\n\n  .separation-unit {\n    font-size: 16px;\n    color: #64748B;\n  }\n\n  .toggle-switch {\n    position: relative;\n    display: inline-flex;\n    height: 24px;\n    width: 44px;\n    flex-shrink: 0;\n    cursor: pointer;\n    border-radius: 9999px;\n    border: 2px solid transparent;\n    transition: background-color 200ms ease-in-out;\n    background-color: #e5e7eb;\n    appearance: none;\n    padding: 0;\n  }\n\n  .toggle-switch.enabled {\n    background-color: #2563eb;\n  }\n\n  .toggle-switch::after {\n    content: '';\n    position: absolute;\n    pointer-events: none;\n    display: inline-block;\n    height: 20px;\n    width: 20px;\n    transform: translateX(2px);\n    border-radius: 9999px;\n    background-color: white;\n    box-shadow: 0 0 0 0;\n    transition: transform 200ms ease-in-out;\n  }\n\n  .toggle-switch.enabled::after {\n    transform: translateX(22px);\n  }\n\n  .separation-input {\n    width: 48px;\n    text-align: center;\n    padding: 4px;\n    border: 1px solid #d1d5db;\n    border-radius: 6px;\n    font-size: 0.875rem;\n  }\n\n  .separation-unit {\n    font-size: 0.875rem;\n    color: #6b7280;\n  }\n\n  .code-toggle-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding-top: 12px;\n    padding-bottom: 12px;\n  }\n\n  .config-section-divider {\n    padding-top: 12px;\n  }\n\n  .save-button-container {\n    background-color: white;\n    padding: 16px;\n    display: flex;\n    gap: 12px;\n  }\n\n  .save-button {\n    width: 100%;\n    margin-left: auto;\n    background-color: #2563eb;\n    color: white;\n    padding: 8.25px 12.25px;\n    border-radius: 8px;\n    border: none;\n    cursor: pointer;\n    transition: background-color 150ms ease-in-out;\n    font-size: 0.875rem;\n  }\n\n  .save-button:hover {\n    background-color: #1055e8;\n  }\n\n  .save-button:active {\n    background-color: #2563eb;\n  }\n\n  .save-button:disabled {\n    background-color: #93c5fd; \n    cursor: not-allowed;\n  }\n\n  .save-button-secondary {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: white;\n    color: #8F2C23;\n    padding: 8.25px 12.25px;\n    border-radius: 8px;\n    border: 1px solid #E2E8F0;\n    cursor: pointer;\n    transition: all 150ms ease-in-out;\n    font-size: 0.875rem;\n  }\n\n  .save-button-secondary:hover {\n    background-color: #F8FAFC;\n    color: #8F2C23;\n    border-color: #CBD5E1;\n  }\n\n  .save-button-secondary:disabled {\n    opacity: 0.7;\n    cursor: not-allowed;\n    background-color: #F3F4F6;\n    color: #9CA3AF;\n    border-color: #E5E7EB;\n  }\n    \n  .traffic-manager-template {\n    display: flex;\n    flex-direction: column;\n    gap: 18px;\n    width: 100%;\n    min-width: 0;\n  }\n\n  .no-scrollbar::-webkit-scrollbar {\n      display: none; /* Chrome, Safari, and Opera */\n  }\n\n  .no-scrollbar {\n      -ms-overflow-style: none;  /* IE and Edge */\n      scrollbar-width: none;  /* Firefox */\n  }\n  @keyframes scrollToBottom {\n    0% { transform: translateY(0px); }\n    50% { transform: translateY(10px); }\n    100% { transform: translateY(0px); }\n  }\n\n  /* The animation class */\n  .animate-scrollToBottom {\n    animation: scrollToBottom 1s infinite ease-in-out;\n  }\n    /* Accordion stylings */\n  .accordion-container {\n    width: 100%;\n    border: 1px solid #ccc;\n    border-radius: 8px;\n    background-color: #ffffff;\n    overflow: hidden;\n  }\n\n  .accordion-header {\n    padding: 12px 16px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    user-select: none;\n  }\n\n  .accordion-title {\n    margin: 0;\n    font-size: 12px;\n    font-weight: 500;\n    color: #19213d;\n  }\n\n  .accordion-content {\n    padding: 0 24px 24px 24px;\n  }\n\n";export{n as componentStyles};
 //# sourceMappingURL=ILPopup.styles.js.map