@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/styles/06-components/_components.menu.scss

@@ -1,234 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
-@use '../01-settings/settings.menu' as menu;
-@use '../02-tools/tools.rem' as rem;
-@use '../02-tools/tools.animations' as animations;
-@use '../02-tools/tools.color-mode' as *;
-
-.c-menu {
-    $root : &;
-
-    --#{config.$prefix}menu-min-width: #{rem.rem(menu.$menu-min-width)};
-    --#{config.$prefix}menu-container-width: #{rem.rem(menu.$menu-container-width)};
-    --#{config.$prefix}menu-padding-x: #{rem.rem(menu.$menu-padding-x)};
-    --#{config.$prefix}menu-padding-y: #{rem.rem(menu.$menu-padding-y)};
-    --#{config.$prefix}menu-bg: #{menu.$menu-bg};
-    --#{config.$prefix}menu-border-radius: #{menu.$menu-border-radius};
-    --#{config.$prefix}menu-box-shadow: #{menu.$menu-box-shadow};
-    --#{config.$prefix}menu-items-gap: #{menu.$menu-items-gap};
-    --#{config.$prefix}menu-item-padding-x: #{menu.$menu-item-padding-x};
-    --#{config.$prefix}menu-item-padding-y: #{menu.$menu-item-padding-y};
-    --#{config.$prefix}menu-item-inner-gap: #{menu.$menu-item-inner-gap};
-    --#{config.$prefix}menu-item-color: #{menu.$menu-item-color};
-    --#{config.$prefix}menu-item-font-size: #{menu.$menu-item-font-size};
-    --#{config.$prefix}menu-item-font-weight: #{menu.$menu-item-font-weight};
-    --#{config.$prefix}menu-item-bg: #{menu.$menu-item-bg};
-    --#{config.$prefix}menu-item-bg-hover: #{menu.$menu-item-bg-hover};
-    --#{config.$prefix}menu-item-bg-active: #{menu.$menu-item-bg-active};
-    --#{config.$prefix}menu-item-icon-size: #{menu.$menu-item-icon-size};
-    --#{config.$prefix}menu-subitem-color: #{menu.$menu-subitem-color};
-    --#{config.$prefix}menu-subitem-color-active: #{menu.$menu-subitem-color-active};
-    --#{config.$prefix}menu-subitem-font-weight: #{menu.$menu-subitem-font-weight};
-    --#{config.$prefix}menu-subitem-font-weight-active: #{menu.$menu-subitem-font-weight-active};
-    --#{config.$prefix}menu-mega-padding-x: #{rem.rem(menu.$menu-mega-padding-x)};
-    --#{config.$prefix}menu-mega-padding-y: #{rem.rem(menu.$menu-mega-padding-y)};
-    --#{config.$prefix}menu-mega-grid-gap: #{rem.rem(menu.$menu-mega-grid-gap)};
-    --#{config.$prefix}menu-mega-header-title-font-size: #{menu.$menu-mega-header-title-font-size};
-    --#{config.$prefix}menu-mega-header-title-font-weight: #{menu.$menu-mega-header-title-font-weight};
-
-    display: inline-block;
-    min-width: var(--#{config.$prefix}menu-min-width);
-    padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
-    background-color: var(--#{config.$prefix}menu-bg);
-    border-radius: var(--#{config.$prefix}menu-border-radius);
-    box-shadow: var(--#{config.$prefix}menu-box-shadow);
-    z-index: 5;
-
-    &__container {
-        width: 100%;
-        max-width: var(--#{config.$prefix}menu-container-width);
-        margin: {
-            left: auto;
-            right: auto;
-        };
-        padding: 0 var(--#{config.$prefix}menu-mega-padding-x);
-    }
-    
-    &__list {
-        list-style: none;
-        margin-bottom: 0;
-        padding-left: 0;
-    }
-
-    &__item {
-        &+& {
-            margin-top: var(--#{config.$prefix}menu-items-gap);
-        }
-
-        &--haschildren {
-            position: relative;
-
-            >#{$root} {
-                position: absolute;
-                top: 0;
-                left: 100%;
-                visibility: hidden;
-                opacity: 0;
-                @include animations.basic-transition();
-            }
-
-            &:hover {
-                >#{$root} {
-                    visibility: visible;
-                    opacity: 1;
-                }
-            }
-        }
-    }
-
-    &__link {
-        display: flex;
-        align-items: center;
-        gap: var(--#{config.$prefix}menu-item-inner-gap);
-        padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
-        color: var(--#{config.$prefix}menu-item-color);
-        font-size: var(--#{config.$prefix}menu-item-font-size);
-        font-weight: var(--#{config.$prefix}menu-item-font-weight);
-        background-color: var(--#{config.$prefix}menu-item-bg);
-        border-radius: var(--#{config.$prefix}menu-border-radius);
-        cursor: pointer;
-        @include animations.basic-transition();
-
-        &:hover {
-            color: var(--#{config.$prefix}menu-item-color);
-            background-color: var(--#{config.$prefix}menu-item-bg-hover);
-        }
-
-        &:focus, &:active, &.is-active {
-            background-color: var(--#{config.$prefix}menu-item-bg-active);
-        }
-    }
-
-    &__icon {
-        font-size: var(--#{config.$prefix}menu-item-icon-size);
-    }
-
-    &__toggle {
-        cursor: pointer;
-        user-select: none;
-    }
-    
-    &__toggle-icon {
-        margin-left: auto;
-        @include animations.basic-transition();
-    }
-
-    &__subitems {
-        position: relative;
-    }
-
-    &__subitems-wrapper {
-        height: 0px;
-        overflow: hidden;
-        @include animations.basic-transition();
-    }
-
-    &__subitems-list {
-        list-style: none;
-        margin-bottom: 0;
-        padding-left: rem.rem(23px);
-    }
-
-    &__subitem-link {
-        display: flex;
-        align-items: center;
-        gap: var(--#{config.$prefix}menu-item-inner-gap);
-        padding: var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x);
-        color: var(--#{config.$prefix}menu-subitem-color);
-        font-size: var(--#{config.$prefix}menu-item-font-size);
-        font-weight: var(--#{config.$prefix}menu-subitem-font-weight);
-        @include animations.basic-transition();
-
-        &:hover {
-            color: var(--#{config.$prefix}primary);
-        }
-
-        &:focus, &:active, &.is-active {
-            color: var(--#{config.$prefix}menu-subitem-color-active);
-            font-weight: var(--#{config.$prefix}menu-subitem-font-weight-active);
-        }
-    }
-
-    &__grid {
-        --#{config.$prefix}gutter-x: var(--#{config.$prefix}menu-mega-grid-gap);
-    }
-
-    &__header {
-        display: flex;
-        align-items: center;
-        gap: var(--#{config.$prefix}menu-item-inner-gap);
-        padding:  0 var(--#{config.$prefix}menu-item-padding-y) var(--#{config.$prefix}menu-item-padding-x) var(--#{config.$prefix}menu-item-padding-x);
-        margin-bottom: var(--#{config.$prefix}menu-item-padding-y);
-        border-bottom: 1px solid var(--#{config.$prefix}primary-border-subtle);
-    }
-
-    &__header-title {
-        color: var(--#{config.$prefix}menu-item-color);
-        font-size: var(--#{config.$prefix}menu-mega-header-title-font-size);
-        font-weight: var(--#{config.$prefix}menu-mega-header-title-font-weight);
-    }
-
-    &__header-icon {
-        font-size: rem.rem(24px);
-    }
-
-    &__content-title {
-        color: var(--#{config.$prefix}menu-item-color);
-        font-size: var(--#{config.$prefix}menu-item-font-size);
-        font-weight: var(--#{config.$prefix}menu-item-font-weight);
-    }
-
-    &__content-text {
-        color: var(--#{config.$prefix}menu-subitem-color);
-        font-size: var(--#{config.$prefix}menu-item-font-size);
-        margin-top: var(--#{config.$prefix}menu-items-gap);
-    }
-
-    &__content-menu {
-        height: 100%;
-        padding-left: var(--#{config.$prefix}menu-mega-grid-gap);
-        border-left: 1px solid var(--#{config.$prefix}primary-border-subtle);
-    }
-
-    &__content-menu-title {
-        color: var(--#{config.$prefix}menu-subitem-color);
-        font-size: var(--#{config.$prefix}menu-item-font-size);
-    }
-
-    &__content-menu-list {
-        padding-left: 0;
-        list-style: none;
-    }
-
-    &__content-menu-item {
-        margin-top: rem.rem(12px);
-    }
-
-    &__content-menu-link {
-        color: var(--#{config.$prefix}menu-item-color);
-        font-size: var(--#{config.$prefix}menu-item-font-size);
-        font-weight: var(--#{config.$prefix}menu-item-font-weight);
-
-        &:hover {
-            color: var(--#{config.$prefix}menu-item-color);
-        }
-    }
-
-    &--mega {
-        width: 100%;
-        min-height: auto;
-        padding: var(--#{config.$prefix}menu-mega-padding-y) 0;
-        border-radius: 0px;
-    }
-}

package/src/styles/06-components/_components.messages.scss

@@ -1,319 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
-@use '../01-settings/settings.messages' as messages;
-@use '../01-settings/settings.border-radius' as border;
-@use '../01-settings/settings.typography' as typo;
-@use '../02-tools/tools.rem' as rem;
-@use '../02-tools/tools.size' as *;
-@use '../02-tools/tools.object-fit' as *;
-@use '../02-tools/tools.color-mode' as *;
-@use '../02-tools/tools.size' as *;
-
-.c-messages {
-  $root: &;
-
-  --#{config.$prefix}messages-width: #{messages.$messages-width};
-  --#{config.$prefix}messages-padding-x: #{rem.rem(messages.$messages-padding-x)};
-  --#{config.$prefix}messages-padding-y: #{rem.rem(messages.$messages-padding-y)};
-  --#{config.$prefix}messages-border-radius: #{messages.$messages-border-radius};
-  --#{config.$prefix}messages-border-width: #{messages.$messages-border-width};
-  --#{config.$prefix}messages-border-color: #{messages.$messages-border-color};
-  --#{config.$prefix}messages-bg: #{messages.$messages-bg};
-  --#{config.$prefix}messages-content-margin-top: #{rem.rem(messages.$messages-content-margin-top)};
-  --#{config.$prefix}messages-avatar-margin: #{rem.rem(messages.$messages-avatar-margin)};
-  --#{config.$prefix}messages-items-padding-x: #{rem.rem(messages.$messages-items-padding-x)};
-  --#{config.$prefix}messages-items-padding-y: #{rem.rem(messages.$messages-items-padding-y)};
-  --#{config.$prefix}messages-items-width: #{rem.rem(messages.$messages-items-width)};
-  --#{config.$prefix}messages-items-border-width: #{messages.$messages-items-border-width};
-  --#{config.$prefix}messages-items-border-color: #{messages.$messages-items-border-color};
-  --#{config.$prefix}messages-items-border-radius: #{messages.$messages-items-border-radius};
-  --#{config.$prefix}messages-items-gap: #{rem.rem(messages.$messages-items-gap)};
-  --#{config.$prefix}messages-text-padding-x: #{rem.rem(messages.$messages-text-padding-x)};
-  --#{config.$prefix}messages-text-padding-y: #{rem.rem(messages.$messages-text-padding-y)};
-  --#{config.$prefix}messages-text-color: #{messages.$messages-text-secondary-color};
-  --#{config.$prefix}messages-text-font-size: #{messages.$messages-text-font-size};
-  --#{config.$prefix}messages-text-bg: #{messages.$messages-text-secondary-bg};
-  --#{config.$prefix}messages-text-border-radius: #{messages.$messages-text-border-radius};
-  --#{config.$prefix}messages-file-padding-x: #{messages.$messages-file-padding-x};
-  --#{config.$prefix}messages-file-padding-y: #{messages.$messages-file-padding-y};
-  --#{config.$prefix}messages-file-text-font-size: #{messages.$messages-file-text-font-size};
-  --#{config.$prefix}messages-file-text-color: #{messages.$messages-file-text-secondary-color};
-  --#{config.$prefix}messages-file-icon-size: #{rem.rem(messages.$messages-file-icon-size)};
-  --#{config.$prefix}messages-file-icon-margin-right: #{messages.$messages-file-icon-margin-right};
-  --#{config.$prefix}messages-file-icon-bg: #{messages.$messages-file-icon-bg};
-  --#{config.$prefix}messages-file-info-font-size: #{messages.$messages-file-info-font-size};
-  --#{config.$prefix}messages-file-info-color: #{messages.$messages-file-info-color};
-  --#{config.$prefix}messages-file-bg: #{messages.$messages-file-secondary-bg};
-  --#{config.$prefix}messages-file-border-radius: #{messages.$messages-file-border-radius};
-  --#{config.$prefix}messages-image-width: #{messages.$messages-image-width};
-  --#{config.$prefix}messages-image-height: #{messages.$messages-image-height};
-  --#{config.$prefix}messages-image-border-radius: #{messages.$messages-image-border-radius};
-  --#{config.$prefix}messages-form-margin-top: #{rem.rem(messages.$messages-form-margin-top)};
-  --#{config.$prefix}messages-form-row-gap: #{rem.rem(messages.$messages-form-row-gap)};
-  --#{config.$prefix}messages-form-submit-icon-size: #{rem.rem(messages.$messages-form-submit-icon-size)};
-  --#{config.$prefix}messages-input-padding-x: #{rem.rem(messages.$messages-input-padding-x)};
-  --#{config.$prefix}messages-input-padding-y: #{rem.rem(messages.$messages-input-padding-y)};
-  --#{config.$prefix}messages-input-font-size: #{messages.$messages-input-font-size};
-  --#{config.$prefix}messages-input-color: #{messages.$messages-input-color};
-  --#{config.$prefix}messages-input-placeholder-color: #{messages.$messages-input-placeholder-color};
-  --#{config.$prefix}messages-input-border-width: #{messages.$messages-input-border-width};
-  --#{config.$prefix}messages-input-border-color: #{messages.$messages-input-border-color};
-  --#{config.$prefix}messages-input-border-radius: #{messages.$messages-input-border-radius};
-  --#{config.$prefix}messages-input-options-icons-size: #{messages.$messages-input-options-icons-size};
-  --#{config.$prefix}messages-input-options-row-gap: #{rem.rem(messages.$messages-input-options-row-gap)};
-  --#{config.$prefix}messages-body-height: #{messages.$messages-body-height};
-
-  width: 100%;
-  max-width: var(--#{config.$prefix}messages-width);
-  min-width: var(--#{config.$prefix}messages-width);
-  padding: var(--#{config.$prefix}messages-padding-y)
-    var(--#{config.$prefix}messages-padding-x);
-  border-radius: var(--#{config.$prefix}messages-border-radius);
-  border: var(--#{config.$prefix}messages-border-width) solid
-    var(--#{config.$prefix}messages-border-color);
-  background-color: var(--#{config.$prefix}messages-bg);
-  
-  &__body {
-    max-height: var(--#{config.$prefix}messages-body-height);
-    min-height: var(--#{config.$prefix}messages-body-height);
-    overflow: auto;
-  }
-
-  &__content {
-    display: flex;
-    align-items: flex-end;
-    
-    margin-top: var(--#{config.$prefix}messages-content-margin-top);
-  }
-
-  &__items {
-    display: flex;
-    flex-direction: column;
-    gap: var(--#{config.$prefix}messages-items-gap);
-    width: 100%;
-    max-width: var(--#{config.$prefix}messages-items-width);
-    padding: var(--#{config.$prefix}messages-items-padding-y)
-      var(--#{config.$prefix}messages-items-padding-x);
-    border: var(--#{config.$prefix}messages-items-border-width) solid
-      var(--#{config.$prefix}messages-items-border-color);
-
-
-    >*:first-child {
-      border-radius: var(--#{config.$prefix}messages-text-border-radius)
-      var(--#{config.$prefix}messages-text-border-radius)
-      var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm;
-    }
-
-    >*:last-child {
-      border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius)
-      var(--#{config.$prefix}messages-text-border-radius)
-      var(--#{config.$prefix}messages-text-border-radius);
-    }
-  }
-
-  &__avatar {
-    flex: 0 0 var(--#{config.$prefix}avatar-size);
-    margin-right: var(--#{config.$prefix}messages-avatar-margin);
-  }
-
-  &__name {
-    color: var(--#{config.$prefix}secondary-text-emphasis);
-    font-size: var(--#{config.$prefix}messages-file-info-font-size);
-    font-weight: typo.$font-weight-medium;
-  }
-
-  &__time {
-    display: block;
-    width: 100%;
-    text-align: right;
-    color: var(--#{config.$prefix}messages-file-info-color);
-    font-size: var(--#{config.$prefix}messages-file-info-font-size);
-    margin-top: var(--#{config.$prefix}messages-items-gap);
-  }
-
-  &__text {
-    width: fit-content;
-    color: var(--#{config.$prefix}messages-text-color);
-    font-size: var(--#{config.$prefix}messages-text-font-size);
-    padding: var(--#{config.$prefix}messages-text-padding-y)
-      var(--#{config.$prefix}messages-text-padding-x);
-    background-color: var(--#{config.$prefix}messages-text-bg);
-    border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius)  var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm;
-  }
-
-  &__file {
-    display: flex;
-    flex-wrap: wrap;
-    padding: var(--#{config.$prefix}messages-file-padding-y) var(--#{config.$prefix}messages-file-padding-x);
-    border-radius: border.$border-radius-sm  var(--#{config.$prefix}messages-file-border-radius) var(--#{config.$prefix}messages-file-border-radius) border.$border-radius-sm;
-    background: var(--#{config.$prefix}messages-file-bg);
-  }
-
-  &__file-icon {
-    display: grid !important;
-    place-items: center;
-    font-size: rem.rem(24px);
-    @include square(var(--#{config.$prefix}messages-file-icon-size));
-    color: var(--#{config.$prefix}tertiary-text-emphasis);
-    margin-right: var(--#{config.$prefix}messages-file-icon-margin-right);
-    background-color: var(--#{config.$prefix}body-bg);
-    border-radius: border.$border-radius-pill;
-   
-  }
-
-  &__file-name {
-    color: var(--#{config.$prefix}messages-file-text-color);
-    font-size: var(--#{config.$prefix}messages-file-text-font-size);
-  }
-
-  &__file-size {
-    color: var(--#{config.$prefix}messages-file-info-color);
-    font-size: var(--#{config.$prefix}messages-file-info-font-size);
-  }
-
-  &__image {
-    @include size(var(--#{config.$prefix}messages-image-width), var(--#{config.$prefix}messages-image-height));
-    border-radius: border.$border-radius-sm var(--#{config.$prefix}messages-image-border-radius) var(--#{config.$prefix}messages-image-border-radius) border.$border-radius-sm;
-    @include object-fit(cover);
-  }
-
-  &__content--self {
-    flex-direction: row-reverse;
-    justify-content: flex-start;
-
-    #{$root} {
-      &__avatar {
-        margin-right: 0;
-        margin-left: var(--#{config.$prefix}messages-avatar-margin);
-      }
-
-      &__items {
-        align-items: flex-end;
-        border-radius: var(--#{config.$prefix}messages-items-border-radius)
-          var(--#{config.$prefix}messages-items-border-radius) 0
-          var(--#{config.$prefix}messages-items-border-radius);
-
-          >*:first-child {
-            border-radius: var(--#{config.$prefix}messages-text-border-radius)
-            var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm
-            var(--#{config.$prefix}messages-text-border-radius);
-          }
-      
-          >*:last-child {
-            border-radius: var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm 
-            var(--#{config.$prefix}messages-text-border-radius)
-            var(--#{config.$prefix}messages-text-border-radius);
-          }
-      }
-
-      &__text {
-        --#{config.$prefix}messages-text-color: #{messages.$messages-text-primary-color};
-        --#{config.$prefix}messages-text-bg: #{messages.$messages-text-primary-bg};
-        border-radius: var(--#{config.$prefix}messages-text-border-radius) border.$border-radius-sm border.$border-radius-sm var(--#{config.$prefix}messages-text-border-radius);
-      }
-
-      &__file {
-        --#{config.$prefix}messages-file-text-color: #{messages.$messages-file-text-primary-color};
-        --#{config.$prefix}messages-file-bg: #{messages.$messages-file-primary-bg};
-        border-radius: var(--#{config.$prefix}messages-file-border-radius) border.$border-radius-sm border.$border-radius-sm var(--#{config.$prefix}messages-file-border-radius);
-
-        @include color-mode('dark') {
-          --#{config.$prefix}messages-file-icon-bg: #{messages.$messages-file-icon-bg-dark};
-        }
-      }
-
-      &__image {
-        border-radius: var(--#{config.$prefix}messages-image-border-radius) border.$border-radius-sm border.$border-radius-sm var(--#{config.$prefix}messages-image-border-radius);
-      }
-
-      &__file-icon {
-        color: var(--#{config.$prefix}invert-text-emphasis);
-        background-color: var(--#{config.$prefix}messages-file-icon-bg);
-
-        @include color-mode('dark') {
-          --#{config.$prefix}messages-file-icon-bg: #{messages.$messages-file-icon-bg-dark};
-        }
-      }
-    }
-  }
-
-  &__form {
-    display: flex;
-    gap: var(--#{config.$prefix}messages-form-row-gap);
-    margin-top: var(--#{config.$prefix}messages-form-margin-top);
-  }
-
-  &__input-group {
-    width: 100%;
-    position: relative;
-  }
-
-  &__options {
-    position: absolute;
-    right: var(--#{config.$prefix}messages-input-padding-x);
-    top: 50%;
-    display: flex;
-    gap: var(--#{config.$prefix}messages-input-options-row-gap);
-    align-items: center;
-    transform: translateY(-50%);
-  }
-
-  &__option {
-    appearance: none;
-    border: 0;
-    background-color: transparent;
-    padding: 0;
-    margin: 0;
-    cursor: pointer;
-  }
-
-  &__option-icon {
-    color: var(--#{config.$prefix}tertiary-text-emphasis);
-    cursor: pointer;
-  }
-
-  &__input {
-    width: 100%;
-    padding: var(--#{config.$prefix}messages-input-padding-y) var(--#{config.$prefix}messages-input-padding-x);
-    color: var(--#{config.$prefix}messages-input-color);
-    font-size: var(--#{config.$prefix}messages-input-font-size);
-    border: var(--#{config.$prefix}messages-input-border-width) solid var(--#{config.$prefix}messages-input-border-color);
-    border-radius: var(--#{config.$prefix}messages-input-border-radius);
-    background-color: var(--#{config.$prefix}messages-bg);
-    resize: none;
-
-    &::placeholder {
-      color: var(--#{config.$prefix}messages-input-placeholder-color);
-      font-size: var(--#{config.$prefix}messages-input-font-size);
-    }
-
-    &:focus {
-      outline: 0;
-      border-color: var(--#{config.$prefix}primary);
-    }
-  }
-
-  &__submit {
-    display: grid;
-    place-items: center;
-    align-self: flex-end;
-    padding: rem.rem(10px);
-    background-color: var(--#{config.$prefix}brand-bg-subtle);
-    color: var(--#{config.$prefix}invert-text-emphasis);
-    border-radius: border.$border-radius-pill;
-    cursor: pointer;
-    appearance: none;
-    border: 0;
-
-    .c-icon {
-      width: var(--#{config.$prefix}messages-form-submit-icon-size);
-      height: var(--#{config.$prefix}messages-form-submit-icon-size);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-}

package/src/styles/06-components/_components.modal.scss

@@ -1,154 +0,0 @@
-@use '../01-settings/settings.config' as config;
-@use '../01-settings/settings.colors' as *;
-@use '../01-settings/settings.maps' as maps;
-@use '../01-settings/settings.modal' as modal;
-@use '../02-tools/tools.rem' as rem;
-@use '../02-tools/tools.size' as *;
-@use '../02-tools/tools.spacing' as *;
-
-.c-modal {
-  $root: &;
-
-  --#{config.$prefix}modal-inner-padding: #{rem.rem(modal.$modal-inner-padding)};
-
-  --#{config.$prefix}modal-content-color: #{modal.$modal-content-color};
-  --#{config.$prefix}modal-content-bg: #{modal.$modal-content-bg};
-  --#{config.$prefix}modal-content-border-radius: #{modal.$modal-content-border-radius};
-  --#{config.$prefix}modal-content-box-shadow: #{modal.$modal-content-box-shadow};
-
-  --#{config.$prefix}modal-header-padding-bottom: #{rem.rem(modal.$modal-header-padding-bottom)};
-  --#{config.$prefix}modal-title-font-size: #{modal.$modal-title-font-size};
-  --#{config.$prefix}modal-sub-margin-top: #{rem.rem(modal.$modal-sub-margin-top)};
-  --#{config.$prefix}modal-sub-color: #{modal.$modal-sub-color};
-  --#{config.$prefix}modal-sub-font-size: #{modal.$modal-sub-font-size};
-
-  --#{config.$prefix}modal-footer-items-gap: #{rem.rem(modal.$modal-footer-items-gap)};
-
-  --#{config.$prefix}modal-backdrop-bg: #{modal.$modal-backdrop-bg};
-  --#{config.$prefix}modal-backdrop-opacity: #{modal.$modal-backdrop-opacity};
-  --#{config.$prefix}modal-backdrop-blur: #{modal.$modal-backdrop-blur};
-
-  --#{config.$prefix}modal-close-icon-color: #{modal.$modal-close-icon-color};
-  --#{config.$prefix}modal-close-icon-size: #{rem.rem(modal.$modal-close-icon-size)};
-
-  --#{config.$prefix}modal-sm: #{rem.rem(modal.$modal-sm)};
-  --#{config.$prefix}modal-md: #{rem.rem(modal.$modal-md)};
-  --#{config.$prefix}modal-lg: #{rem.rem(modal.$modal-lg)};
-  --#{config.$prefix}modal-xl: #{rem.rem(modal.$modal-xl)};
-  --#{config.$prefix}modal-width: var(--#{config.$prefix}modal-md);
-
-  position: fixed;
-  inset: 0;
-  @include square(100%);
-  display: none;
-
-  &__backdrop {
-    position: absolute;
-    inset: 0;
-    background-color: var(--#{config.$prefix}modal-backdrop-bg);
-    opacity: 0;
-    transition: 0.3s;
-  }
-
-  &__dialog {
-    position: relative;
-    display: flex;
-    align-items: center;
-    max-width: var(--#{config.$prefix}modal-width);
-    height: 100%;
-    padding: var(--#{config.$prefix}modal-inner-padding);
-    margin: {
-      left: auto;
-      right: auto;
-    }
-    opacity: 0;
-    z-index: 2;
-    pointer-events: none;
-    transition: 0.3s ease;
-    will-change: transform;
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    max-height: 100%;
-    padding: var(--#{config.$prefix}modal-inner-padding);
-    background-color: var(--#{config.$prefix}modal-content-bg);
-    box-shadow: var(--#{config.$prefix}modal-content-box-shadow);
-    border-radius: var(--#{config.$prefix}modal-content-border-radius);
-    overflow: hidden;
-    pointer-events: auto;
-  }
-
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    padding-bottom: var(--#{config.$prefix}modal-header-padding-bottom);
-  }
-
-  &__title {
-    font-size: var(--#{config.$prefix}modal-title-font-size);
-  }
-
-  &__sub {
-    color: var(--#{config.$prefix}modal-sub-color);
-    font-size: var(--#{config.$prefix}modal-sub-font-size);
-    margin-top: var(--#{config.$prefix}modal-sub-margin-top);
-  }
-
-  &__body {
-    padding: var(--#{config.$prefix}modal-inner-padding) 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--#{config.$prefix}modal-footer-items-gap);
-    padding-top: var(--#{config.$prefix}modal-inner-padding);
-  }
-
-  &__close {
-    @include pr(0);
-    @include pt(0);
-    cursor: pointer;
-    user-select: none;
-    z-index: 3;
-
-    svg {
-      @include square(var(--#{config.$prefix}modal-close-icon-size));
-    }
-  }
-
-  &--sm {
-    --#{config.$prefix}modal-width: var(--#{config.$prefix}modal-sm);
-  }
-
-  &--md {
-    --#{config.$prefix}modal-width: var(--#{config.$prefix}modal-md);
-  }
-
-  &--lg {
-    --#{config.$prefix}modal-width: var(--#{config.$prefix}modal-lg);
-  }
-
-  &--xl {
-    --#{config.$prefix}modal-width: var(--#{config.$prefix}modal-xl);
-  }
-
-  &.is-open {
-    
-    #{$root} {
-      &__backdrop {
-        opacity: var(--#{config.$prefix}modal-backdrop-opacity);
-      }
-
-      &__dialog {
-        opacity: 1;
-      }
-    }
-  }
-}