// Color Picker (New)
//================================================== //

// Dependencies
// icons-new
// input-new
// popupmenu-new

.colorpicker-container {
  .colorpicker {
    padding: 10px 2px 10px 10px;
  }

  &.color-only .trigger {
    margin-inline-start: -4px;
  }
}

.colorpicker-container .trigger {
  margin-inline-start: 5px;
  margin-top: -2px;

  .icon {
    inset-inline-start: 8px;
  }

  .colorpicker {
    width: 126px;
  }
}

.field-short,
.form-layout-compact {
  .colorpicker-container .trigger {
    margin-top: 1px;
  }
}

html[dir='rtl'] {
  .popupmenu.colorpicker {
    padding: 10px 10px 10px 0;
  }

  .colorpicker-container {
    .swatch {
      position: relative;
      inset-inline-end: 83px;
    }

    .colorpicker {
      padding: 11px 10px 8px; // Adjusted padding
      position: relative;
      inset-inline-end: 0; // Remove negative positioning
      text-align: right; // Changed from left for RTL
    }

    .trigger .icon {
      inset-inline-end: 7px; // Position from right in RTL
      top: 7px;
    }
  }
}

.modal-body {
  .colorpicker-container .trigger {
    margin-top: 1px;
  }
}
