powell-react 0.0.30 → 0.0.32

package/dist/powell/styles/global.scss

@@ -1,1460 +0,0 @@
-@mixin components-general-styles() {
-  [class*="-wrapper"] {
-    .field {
-      display: flex;
-      gap: 0.25rem 1rem;
-
-      > .field-inner {
-        flex-grow: 1;
-      }
-    }
-
-    &.control-disabled {
-      label {
-        opacity: 0.6;
-      }
-    }
-
-    &.label-side .field {
-      flex-direction: row;
-      align-items: center;
-    }
-
-    &.label-top .field {
-      flex-direction: column;
-
-      label {
-        margin-bottom: 0.25rem;
-      }
-    }
-
-    &.label-float {
-      label {
-        left: auto;
-        inset-inline-start: 0.75rem;
-      }
-
-      &[class^="icon"] .field label {
-        inset-inline-start: 2.5rem;
-      }
-    }
-
-    .hint {
-      color: var(--text-color-secondary);
-      display: block;
-    }
-
-    .error-message {
-      color: rgb(185, 28, 28);
-      display: block;
-    }
-  }
-
-  .auto-complete-wrapper .p-autocomplete,
-  .auto-complete-wrapper .p-autocomplete .p-inputtext,
-  .cascade-select-wrapper .p-cascadeselect,
-  .chips-wrapper .p-chips,
-  .chips-wrapper .p-chips .p-inputtext,
-  .dropdown-wrapper .p-dropdown,
-  .editor-wrapper [data-pc-name="editor"],
-  .input-mask-wrapper .p-inputmask,
-  .input-number-wrapper .p-inputnumber,
-  .input-text-wrapper .p-inputtext,
-  .input-textarea-wrapper .p-inputtext,
-  .input-password-wrapper .p-password,
-  .input-password-wrapper .p-password div,
-  .input-password-wrapper .p-password-input,
-  .mention-wrapper .p-mention,
-  .mention-wrapper .p-mention .p-mention-input,
-  .multi-select-wrapper .p-multiselect,
-  .tree-select-wrapper .p-treeselect {
-    width: 100%;
-  }
-
-  .checkbox-wrapper,
-  .tri-state-checkbox-wrapper,
-  .multi-state-checkbox-wrapper {
-    &.label-side .field {
-      display: inline-flex;
-      flex-direction: row-reverse;
-      gap: 0.25rem 0.5rem;
-
-      .field-inner {
-        flex-grow: 0;
-      }
-    }
-  }
-
-  .input-switch-wrapper {
-    .field-inner {
-      display: inline-flex;
-    }
-  }
-
-  .color-picker-wrapper.is-inline,
-  .editor-wrapper,
-  .input-textarea-wrapper,
-  .list-box-wrapper,
-  .mention-wrapper,
-  .radio-group-wrapper.is-vertical {
-    .field label {
-      align-self: self-start;
-    }
-  }
-}
-
-@mixin components-rtl-styles() {
-  input:not(
-  [type="file" i],
-  [type="image" i],
-  [type="checkbox" i],
-  [type="radio" i]),
-  textarea {
-    unicode-bidi: plaintext;
-  }
-
-  .auto-complete-wrapper {
-    .p-autocomplete-multiple-container .p-autocomplete-token {
-      margin: 0;
-      margin-inline-start: 0.5rem;
-
-      .p-autocomplete-token-icon {
-        margin: 0;
-        margin-inline-start: 0.5rem;
-      }
-    }
-
-    .p-autocomplete-loader {
-      left: auto;
-      right: auto;
-      inset-inline-end: 0.75rem;
-    }
-
-    &:dir(rtl) {
-      .p-autocomplete-dd {
-        .p-autocomplete-dropdown {
-          @include left-side-radius(var(--border-radius));
-          @include right-side-radius(0);
-        }
-
-        .p-autocomplete-input, .p-autocomplete-multiple-container {
-          @include left-side-radius(0);
-          @include right-side-radius(var(--border-radius));
-        }
-      }
-    }
-  }
-
-  .chips-wrapper {
-    .p-chips-multiple-container .p-chips-token {
-      margin: 0;
-      margin-inline-end: 0.5rem;
-
-      .p-chips-token-icon {
-        margin: 0;
-        margin-inline-start: 0.5rem;
-      }
-    }
-  }
-
-  .dropdown-wrapper {
-    &.is-clearable {
-      .p-dropdown-label {
-        padding-right: 0.75rem;
-        padding-inline-end: 1.75rem;
-      }
-
-      .p-dropdown-clear-icon {
-        right: auto;
-        inset-inline-end: 3rem;
-      }
-    }
-  }
-
-  .editor-wrapper .ql-toolbar.ql-snow {
-    direction: ltr;
-  }
-
-  .input-number-wrapper {
-    &:dir(rtl) {
-      &.has-buttons-stacked {
-        .p-inputnumber-input {
-          @include left-side-radius(0);
-          @include right-side-radius(var(--border-radius));
-        }
-
-        .p-button.p-inputnumber-button-up {
-          border-top-left-radius: var(--border-radius);
-          border-top-right-radius: 0;
-        }
-
-        .p-button.p-inputnumber-button-down {
-          border-bottom-left-radius: var(--border-radius);
-          border-bottom-right-radius: 0;
-        }
-      }
-
-      &.has-buttons-horizontal {
-        .p-button.p-inputnumber-button-up {
-          order: 1;
-        }
-
-        .p-button.p-inputnumber-button-down {
-          order: 3;
-        }
-      }
-    }
-  }
-
-  .input-otp-wrapper {
-    .p-inputotp {
-      direction: ltr;
-    }
-
-    &:dir(rtl) {
-      .p-inputotp {
-        justify-content: flex-end;
-      }
-    }
-  }
-
-  .input-text-wrapper {
-    .input-text-inner {
-      position: relative;
-      width: 100%;
-    }
-
-    .input-text-clear-icon {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      cursor: pointer;
-    }
-
-    &.is-clearable {
-      .p-inputtext {
-        padding-right: 0.75rem;
-        padding-inline-end: 2.5rem;
-      }
-
-      .input-text-clear-icon {
-        right: auto;
-        inset-inline-end: 0.75rem;
-      }
-    }
-  }
-
-  .input-password-wrapper {
-    .input-password-inner {
-      position: relative;
-      width: 100%;
-    }
-
-    &:not(.icon-right) {
-      .p-inputtext {
-        padding-right: 0.75rem;
-      }
-    }
-
-    &.has-toggler {
-      .p-input-icon:has([class*=p-password-]) {
-        right: auto;
-        inset-inline-end: 0.75rem;
-      }
-
-      .p-inputtext {
-        padding-inline-end: 2.5rem;
-      }
-    }
-
-    .input-password-clear-icon {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      cursor: pointer;
-    }
-
-    &.is-clearable {
-      .p-inputtext {
-        padding-right: 0.75rem;
-        padding-inline-end: 2.5rem;
-      }
-
-      .input-password-clear-icon {
-        right: auto;
-        inset-inline-end: 0.75rem;
-      }
-
-      &.has-toggler {
-        .p-inputtext {
-          padding-inline-end: 4rem;
-        }
-
-        .input-password-clear-icon {
-          inset-inline-end: 2.5rem;
-        }
-      }
-    }
-  }
-
-  .list-box-wrapper {
-    .p-listbox-header {
-      .p-listbox-filter {
-        padding-right: 0.75rem;
-        padding-inline-end: 1.75rem;
-      }
-
-      .p-listbox-filter-icon {
-        right: auto;
-        inset-inline-end: 0.75rem;
-      }
-    }
-  }
-
-  .multi-select-wrapper {
-    &.is-clearable {
-      .p-multiselect-label {
-        padding-right: 0.75rem;
-        padding-inline-end: 1.75rem;
-      }
-
-      .p-multiselect-clear-icon {
-        right: auto;
-        inset-inline-end: 3rem;
-      }
-    }
-  }
-
-  .radio-group-wrapper {
-    .radio-group-item {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-    }
-
-    &.is-vertical {
-      .radio-group-item {
-        margin-bottom: 0.5rem;
-      }
-    }
-
-    &.is-horizontal {
-      .radio-group-item {
-        gap: 0.25rem;
-      }
-
-      .field-inner {
-        display: flex;
-        gap: 1.25rem;
-      }
-    }
-  }
-
-  .select-button-wrapper {
-    .p-selectbutton {
-      direction: ltr;
-    }
-
-    &:dir(rtl) {
-      .p-selectbutton {
-        text-align: right;
-      }
-    }
-  }
-
-  .tree-select-wrapper {
-    &.is-clearable {
-      .p-treeselect-label {
-        padding-right: 0.75rem;
-        padding-inline-end: 1.75rem;
-      }
-
-      .p-treeselect-clear-icon {
-        right: auto;
-        inset-inline-end: 3rem;
-      }
-    }
-  }
-}
-
-@mixin components-panel-styles() {
-  .p-autocomplete-panel {
-    &.panel-rtl {
-      direction: rtl;
-    }
-  }
-
-  .p-cascadeselect-panel {
-    &.panel-rtl {
-      direction: rtl;
-
-      .p-cascadeselect-group-icon {
-        margin-left: unset;
-        margin-inline-start: auto;
-        transform: rotate(180deg);
-      }
-
-      .p-cascadeselect-item-active > .p-cascadeselect-sublist-wrapper {
-        left: unset;
-        inset-inline-start: 100%;
-      }
-    }
-  }
-
-  .p-dropdown-panel {
-    &.panel-rtl {
-      direction: rtl;
-    }
-
-    .p-dropdown-header {
-      .p-dropdown-filter-icon {
-        right: auto;
-        inset-inline-end: 0.75rem;
-      }
-
-      .p-dropdown-filter {
-        padding-right: 0.75rem;
-        padding-inline-end: 2rem;
-        margin-right: 0;
-        margin-inline-end: -1.75rem;
-      }
-    }
-  }
-
-  .p-password-panel {
-    &.panel-rtl {
-      direction: rtl;
-    }
-  }
-
-  .p-mention-panel {
-    &.panel-rtl {
-      direction: rtl;
-    }
-  }
-
-  .p-multiselect-panel {
-    &.panel-rtl {
-      direction: rtl;
-
-      .p-multiselect-header {
-        .p-checkbox {
-          margin-right: unset;
-          margin-inline-end: 0.5rem;
-        }
-
-        .p-multiselect-close {
-          margin-left: unset;
-          margin-inline-start: 0.5rem;
-        }
-
-        .p-multiselect-filter-container {
-          .p-inputtext {
-            padding-right: 0.75rem;
-            margin-inline-end: 1.75rem;
-            padding-inline-end: 2rem;
-          }
-
-          .p-multiselect-filter-icon {
-            right: auto;
-            inset-inline-end: 0.75rem;
-          }
-        }
-      }
-
-      .p-multiselect-items .p-multiselect-item .p-checkbox {
-        margin-right: unset;
-        margin-inline-end: 0.5rem;
-      }
-    }
-  }
-
-  .p-treeselect-panel {
-    &.panel-rtl {
-      direction: rtl;
-
-      .p-tree .p-tree-container .p-treenode {
-        &:not([aria-expanded="true"]) {
-          .p-tree-toggler {
-            transform: rotate(180deg);
-          }
-        }
-
-        .p-treenode-content {
-          .p-tree-toggler, .p-treenode-icon, .p-checkbox {
-            margin-right: unset;
-            margin-inline-end: 0.5rem;
-          }
-        }
-      }
-
-      .p-tree .p-treenode-children {
-        padding: unset;
-        padding-inline-start: 1rem;
-      }
-
-      .p-treeselect-header {
-        .p-checkbox {
-          margin-right: unset;
-          margin-inline-end: 0.5rem;
-        }
-
-        .p-treeselect-close {
-          margin-left: unset;
-          margin-inline-start: 0.5rem;
-        }
-
-        .p-treeselect-filter-container {
-          .p-inputtext {
-            padding-right: 0.75rem;
-            margin-inline-end: 1.75rem;
-            padding-inline-end: 2rem;
-          }
-
-          .p-treeselect-filter-icon {
-            right: auto;
-            inset-inline-end: 0.75rem;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin components-icon-styles() {
-  [class*=-wrapper] .p-icon-field {
-    .p-input-icon {
-      margin: 0;
-      transform: translateY(-50%);
-      z-index: 50;
-      color: #6b7280;
-    }
-
-    &.p-icon-field-right > .p-input-icon:not(:has([class*=p-password-])) {
-      right: 0.75rem;
-    }
-
-    &.p-icon-field-left > .p-input-icon:not(:has([class*=p-password-])) {
-      left: 0.75rem;
-    }
-  }
-
-  .auto-complete-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      .p-inputtext {
-        padding-right: 2.5rem;
-      }
-
-      &:dir(ltr).has-dropdown {
-        .p-input-icon {
-          right: 4rem;
-        }
-      }
-    }
-
-    &.icon-left {
-      .p-inputtext {
-        padding-left: 2.5rem;
-      }
-
-      &:dir(rtl).has-dropdown {
-        .p-input-icon {
-          left: 4rem;
-        }
-      }
-    }
-  }
-
-  .cascade-select-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      &:dir(rtl) {
-        .p-cascadeselect-label {
-          padding-right: 2.5rem;
-        }
-      }
-
-      &:dir(ltr) {
-        .p-cascadeselect-label {
-          padding-right: 1.75rem;
-        }
-
-        .field .p-icon-field > .p-input-icon {
-          right: 3rem;
-        }
-      }
-    }
-
-    &.icon-left {
-      &:dir(ltr) {
-        .p-cascadeselect-label {
-          padding-left: 2.5rem;
-        }
-      }
-
-      &:dir(rtl) {
-        .p-cascadeselect-label {
-          padding-left: 1.75rem;
-        }
-
-        .field .p-icon-field > .p-input-icon {
-          left: 3rem;
-        }
-      }
-    }
-
-    &.is-clearable {
-      &.icon-right {
-        &:dir(ltr) {
-          .p-cascadeselect-clear-icon {
-            inset-inline-end: 5rem;
-          }
-
-          .p-cascadeselect-label {
-            padding-right: 3.75rem;
-          }
-        }
-      }
-
-      &.icon-left {
-        &:dir(rtl) {
-          .p-cascadeselect-clear-icon {
-            inset-inline-end: 5rem;
-          }
-
-          .p-cascadeselect-label {
-            padding-left: 3.75rem;
-          }
-        }
-      }
-    }
-  }
-
-  .chips-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      .p-inputtext {
-        padding-right: 2.5rem;
-      }
-    }
-
-    &.icon-left {
-      .p-inputtext {
-        padding-left: 2.5rem;
-      }
-    }
-  }
-
-  .dropdown-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      &:dir(rtl) {
-        .p-dropdown-label {
-          padding-right: 2.5rem;
-        }
-      }
-
-      &:dir(ltr) {
-        .p-dropdown-label {
-          padding-right: 1.75rem;
-        }
-
-        .field .p-icon-field > .p-input-icon {
-          right: 3rem;
-        }
-      }
-    }
-
-    &.icon-left {
-      &:dir(ltr) {
-        .p-dropdown-label {
-          padding-left: 2.5rem;
-        }
-      }
-
-      &:dir(rtl) {
-        .p-dropdown-label {
-          padding-left: 1.75rem;
-        }
-
-        .field .p-icon-field > .p-input-icon {
-          left: 3rem;
-        }
-      }
-    }
-
-    &.is-clearable {
-      &.icon-right {
-        &:dir(ltr) {
-          .p-dropdown-clear-icon {
-            inset-inline-end: 5rem;
-          }
-
-          .p-dropdown-label {
-            padding-right: 3.75rem;
-          }
-        }
-      }
-
-      &.icon-left {
-        &:dir(rtl) {
-          .p-dropdown-clear-icon {
-            inset-inline-end: 5rem;
-          }
-
-          .p-dropdown-label {
-            padding-left: 3.75rem;
-          }
-        }
-      }
-    }
-  }
-
-  .input-mask-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      .p-inputtext {
-        padding-right: 2.5rem;
-      }
-    }
-
-    &.icon-left {
-      .p-inputtext {
-        padding-left: 2.5rem;
-      }
-    }
-  }
-
-  .input-number-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      .p-inputtext {
-        padding-right: 2.5rem;
-      }
-
-      &.has-buttons-horizontal {
-        .p-input-icon {
-          right: 4rem;
-        }
-      }
-
-      &.has-buttons-vertical {
-        .p-inputtext {
-          padding-left: 2.5rem;
-        }
-      }
-
-      &:dir(ltr).has-buttons-stacked {
-        .p-input-icon {
-          right: 4rem;
-        }
-      }
-    }
-
-    &.icon-left {
-      .p-inputtext {
-        padding-left: 2.5rem;
-      }
-
-      &.has-buttons-horizontal {
-        .p-input-icon {
-          left: 4rem;
-        }
-      }
-
-      &.has-buttons-vertical {
-        .p-inputtext {
-          padding-right: 2.5rem;
-        }
-      }
-
-      &:dir(rtl).has-buttons-stacked {
-        .p-input-icon {
-          left: 4rem;
-        }
-      }
-    }
-  }
-
-  .input-password-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      .p-inputtext {
-        padding-right: 2.5rem;
-      }
-
-      &:dir(ltr) {
-        &.has-toggler {
-          .p-input-icon:not(:has([class*=p-password-])) {
-            right: 2.75rem;
-          }
-
-          .p-inputtext {
-            padding-right: 4.5rem;
-          }
-        }
-      }
-    }
-
-    &.icon-left {
-      .p-inputtext {
-        padding-left: 2.5rem;
-      }
-
-      &:dir(rtl) {
-        &.has-toggler {
-          .p-input-icon:not(:has([class*=p-password-])) {
-            left: 2.75rem;
-          }
-
-          .p-inputtext {
-            padding-left: 4.5rem;
-          }
-        }
-      }
-    }
-
-    &.is-clearable {
-      &.icon-right {
-        &:dir(ltr) {
-          .input-password-clear-icon {
-            inset-inline-end: 2.5rem;
-          }
-
-          .p-inputtext {
-            padding-right: 4rem;
-          }
-        }
-
-        &.has-toggler {
-          &:dir(ltr) {
-            .input-password-clear-icon {
-              inset-inline-end: 4.75rem;
-            }
-
-            .p-inputtext {
-              padding-right: 6.5rem;
-            }
-          }
-        }
-      }
-
-      &.icon-left {
-        &:dir(rtl) {
-          .input-password-clear-icon {
-            inset-inline-end: 2.5rem;
-          }
-
-          .p-inputtext {
-            padding-left: 4rem;
-          }
-        }
-
-        &.has-toggler {
-          &:dir(rtl) {
-            .input-password-clear-icon {
-              inset-inline-end: 4.75rem;
-            }
-
-            .p-inputtext {
-              padding-left: 6.5rem;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .input-text-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      .p-inputtext {
-        padding-right: 2.5rem;
-      }
-    }
-
-    &.icon-left {
-      .p-inputtext {
-        padding-left: 2.5rem;
-      }
-    }
-
-    &.is-clearable {
-      &.icon-right {
-        &:dir(ltr) {
-          .input-text-clear-icon {
-            inset-inline-end: 2.5rem;
-          }
-
-          .p-inputtext {
-            padding-right: 4rem;
-          }
-        }
-      }
-
-      &.icon-left {
-        &:dir(rtl) {
-          .input-text-clear-icon {
-            inset-inline-end: 2.5rem;
-          }
-
-          .p-inputtext {
-            padding-left: 4rem;
-          }
-        }
-      }
-    }
-  }
-
-  .input-textarea-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      .p-inputtextarea {
-        padding-right: 2.5rem;
-      }
-    }
-
-    &.icon-left {
-      .p-inputtextarea {
-        padding-left: 2.5rem;
-      }
-    }
-  }
-
-  .mention-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      .p-inputtext {
-        padding-right: 2.5rem;
-      }
-    }
-
-    &.icon-left {
-      .p-inputtext {
-        padding-left: 2.5rem;
-      }
-    }
-  }
-
-  .multi-select-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      &:dir(rtl) {
-        .p-multiselect-label {
-          padding-right: 2.5rem;
-        }
-      }
-
-      &:dir(ltr) {
-        .p-multiselect-label {
-          padding-right: 1.75rem;
-        }
-
-        .field .p-icon-field > .p-input-icon {
-          right: 3rem;
-        }
-      }
-    }
-
-    &.icon-left {
-      &:dir(ltr) {
-        .p-multiselect-label {
-          padding-left: 2.5rem;
-        }
-      }
-
-      &:dir(rtl) {
-        .p-multiselect-label {
-          padding-left: 1.75rem;
-        }
-
-        .field .p-icon-field > .p-input-icon {
-          left: 3rem;
-        }
-      }
-    }
-
-    &.is-clearable {
-      &.icon-right {
-        &:dir(ltr) {
-          .p-multiselect-clear-icon {
-            inset-inline-end: 5rem;
-          }
-
-          .p-multiselect-label {
-            padding-right: 3.75rem;
-          }
-        }
-      }
-
-      &.icon-left {
-        &:dir(rtl) {
-          .p-multiselect-clear-icon {
-            inset-inline-end: 5rem;
-          }
-
-          .p-multiselect-label {
-            padding-left: 3.75rem;
-          }
-        }
-      }
-    }
-  }
-
-  .tree-select-wrapper {
-    &.label-float {
-      &:dir(ltr).icon-left,
-      &:dir(rtl).icon-right {
-        label {
-          inset-inline-start: 2.5rem;
-        }
-      }
-    }
-
-    &.icon-right {
-      &:dir(rtl) {
-        .p-treeselect-label {
-          padding-right: 2.5rem;
-        }
-      }
-
-      &:dir(ltr) {
-        .p-treeselect-label {
-          padding-right: 1.75rem;
-        }
-
-        .field .p-icon-field > .p-input-icon {
-          right: 3rem;
-        }
-      }
-    }
-
-    &.icon-left {
-      &:dir(ltr) {
-        .p-treeselect-label {
-          padding-left: 2.5rem;
-        }
-      }
-
-      &:dir(rtl) {
-        .p-treeselect-label {
-          padding-left: 1.75rem;
-        }
-
-        .field .p-icon-field > .p-input-icon {
-          left: 3rem;
-        }
-      }
-    }
-
-    &.is-clearable {
-      &.icon-right {
-        &:dir(ltr) {
-          .p-treeselect-clear-icon {
-            inset-inline-end: 5rem;
-          }
-
-          .p-treeselect-label {
-            padding-right: 3.75rem;
-          }
-        }
-      }
-
-      &.icon-left {
-        &:dir(rtl) {
-          .p-treeselect-clear-icon {
-            inset-inline-end: 5rem;
-          }
-
-          .p-treeselect-label {
-            padding-left: 3.75rem;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin components-addon-styles() {
-  [class*="-wrapper"] {
-    &:dir(rtl) {
-      .p-inputgroup-addon {
-        &, i {
-          transform: rotate(180deg);
-        }
-      }
-    }
-  }
-
-  .auto-complete-wrapper {
-    &:not(.has-dropdown) {
-      @include adjust-addon-styles(".p-inputtext");
-    }
-
-    &.has-dropdown {
-      &.addon-both {
-        .p-autocomplete-dropdown,
-        .p-inputtext {
-          @include radius-all(0);
-        }
-      }
-
-      &.addon-before {
-        &:dir(rtl) {
-          .p-inputtext {
-            @include radius-all(0);
-          }
-        }
-
-        &:dir(ltr) {
-          .p-inputtext {
-            @include right-side-radius(0);
-          }
-        }
-      }
-
-      &.addon-after {
-        &:dir(rtl) {
-          .p-autocomplete-dropdown {
-            @include left-side-radius(0);
-          }
-        }
-
-        &:dir(ltr) {
-          .p-autocomplete-dropdown {
-            @include right-side-radius(0);
-          }
-        }
-      }
-    }
-  }
-
-  .cascade-select-wrapper {
-    @include adjust-addon-styles(".p-inputwrapper");
-  }
-
-  .chips-wrapper {
-    @include adjust-addon-styles(".p-inputtext");
-  }
-
-  .dropdown-wrapper {
-    @include adjust-addon-styles(".p-inputwrapper");
-  }
-
-  .input-mask-wrapper {
-    @include adjust-addon-styles(".p-inputtext");
-  }
-
-  .input-number-wrapper {
-    &:not([class*=has-buttons]) {
-      @include adjust-addon-styles(".p-inputtext");
-    }
-
-    &.has-buttons-stacked {
-      &.addon-both {
-        .p-button.p-inputnumber-button-down,
-        .p-button.p-inputnumber-button-up {
-          @include radius-all(0);
-        }
-      }
-
-      &.addon-after {
-        .p-button.p-inputnumber-button-up,
-        .p-button.p-inputnumber-button-down {
-          @include radius-all(0)
-        }
-      }
-
-      &.addon-before {
-        &:dir(rtl) {
-          .p-inputtext {
-            @include left-side-radius(0)
-          }
-        }
-
-        &:dir(ltr) {
-          .p-inputtext {
-            @include right-side-radius(0)
-          }
-        }
-      }
-    }
-
-    &.has-buttons-horizontal {
-      &.addon-both {
-        .p-button.p-inputnumber-button-down,
-        .p-button.p-inputnumber-button-up {
-          @include radius-all(0);
-        }
-      }
-
-      &.addon-after {
-        &:dir(rtl) {
-          .p-inputtext {
-            @include right-side-radius(0);
-          }
-
-          .p-button.p-inputnumber-button-down {
-            @include left-side-radius(0);
-          }
-        }
-
-        &:dir(ltr) {
-          .p-inputtext {
-            @include left-side-radius(0);
-          }
-
-          .p-button.p-inputnumber-button-up {
-            @include right-side-radius(0);
-          }
-        }
-      }
-
-      &.addon-before {
-        &:dir(rtl) {
-          .p-inputtext {
-            @include left-side-radius(0);
-          }
-
-          .p-button.p-inputnumber-button-up {
-            @include right-side-radius(0);
-          }
-        }
-
-        &:dir(ltr) {
-          .p-inputtext {
-            @include right-side-radius(0);
-          }
-
-          .p-button.p-inputnumber-button-down {
-            @include left-side-radius(0);
-          }
-        }
-      }
-    }
-
-    &.has-buttons-vertical {
-      .p-inputtext {
-        @include radius-all(0);
-        width: 100%
-      }
-
-      &.addon-both {
-        .p-button.p-inputnumber-button-down,
-        .p-button.p-inputnumber-button-up {
-          @include radius-all(0);
-        }
-      }
-
-      &.addon-before {
-        &:dir(ltr) {
-          .p-button.p-inputnumber-button-down,
-          .p-button.p-inputnumber-button-up {
-            @include left-side-radius(0);
-          }
-        }
-
-        &:dir(rtl) {
-          .p-button.p-inputnumber-button-down,
-          .p-button.p-inputnumber-button-up {
-            @include right-side-radius(0);
-          }
-        }
-      }
-
-      &.addon-after {
-        &:dir(ltr) {
-          .p-button.p-inputnumber-button-down,
-          .p-button.p-inputnumber-button-up {
-            @include right-side-radius(0);
-          }
-        }
-
-        &:dir(rtl) {
-          .p-button.p-inputnumber-button-down,
-          .p-button.p-inputnumber-button-up {
-            @include left-side-radius(0);
-          }
-        }
-      }
-    }
-  }
-
-  .input-password-wrapper {
-    @include adjust-addon-styles(".p-inputtext");
-  }
-
-  .input-text-wrapper {
-    @include adjust-addon-styles(".p-inputtext");
-  }
-
-  .input-textarea-wrapper {
-    @include adjust-addon-styles(".p-inputtextarea");
-  }
-
-  .mention-wrapper {
-    @include adjust-addon-styles(".p-inputtext");
-  }
-
-  .multi-select-wrapper {
-    @include adjust-addon-styles(".p-inputwrapper");
-  }
-
-  .tree-select-wrapper {
-    @include adjust-addon-styles(".p-inputwrapper");
-  }
-}
-
-@mixin radius-all($value) {
-  @include left-side-radius($value);
-  @include right-side-radius($value);
-}
-
-@mixin left-side-radius($value) {
-  border-top-left-radius: $value;
-  border-bottom-left-radius: $value;
-}
-
-@mixin right-side-radius($value) {
-  border-top-right-radius: $value;
-  border-bottom-right-radius: $value;
-}
-
-@mixin adjust-addon-styles($selector) {
-  &.addon-both {
-    #{$selector} {
-      @include radius-all(0);
-    }
-  }
-
-  &:dir(ltr) {
-    &.addon-before {
-      #{$selector} {
-        @include left-side-radius(0);
-        @include right-side-radius(var(--border-radius));
-      }
-    }
-
-    &.addon-after {
-      #{$selector} {
-        @include left-side-radius(var(--border-radius));
-        @include right-side-radius(0);
-      }
-    }
-  }
-
-  &:dir(rtl) {
-    &.addon-before {
-      #{$selector} {
-        @include left-side-radius(var(--border-radius));
-        @include right-side-radius(0);
-      }
-    }
-
-    &.addon-after {
-      #{$selector} {
-        @include left-side-radius(0);
-        @include right-side-radius(var(--border-radius));
-      }
-    }
-  }
-}
-
-@include components-general-styles();
-
-@include components-rtl-styles();
-
-@include components-icon-styles();
-
-@include components-addon-styles();
-
-@include components-panel-styles();