/**
 * @file
 * Paragraphs Bundles.
 *
 * Filename:     paragraphs-bundles-color-picker.css
 * Website:      https://www.flashwebcenter.com
 * Developer:    Alaa Haddad https://www.alaahaddad.com.
 */
.pb__tab-display [data-drupal-selector="para-color-picker"] {
  display: inline-block;
  min-width: 150px;
  width: 100%;
  border-radius: 5px;
}

.pb__tab-display [data-drupal-selector="para-color-picker"] > div {
  width: 100%;
  display: flex;
}

.pb__tab-display [data-drupal-selector="para-color-picker"] .form-text {
  display: inline-block;
  width: calc(100% - 50px);
  border-start-start-radius: 8px;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-end-start-radius: 8px;
  border-inline-end: none;
  box-sizing: border-box;
}

.pb__tab-display [data-drupal-selector="para-color-picker"] .form-color {
  display: inline-block;
  width: 50px;
  vertical-align: bottom;
  border-start-start-radius: 0;
  border-start-end-radius: 8px;
  border-end-end-radius: 8px;
  border-end-start-radius: 0;
  border-inline-start: none;
  padding: 5px;
  background-color: black;
  box-sizing: border-box;
}

.pb__tab-display [data-drupal-selector="para-color-picker"]label,
.pb__tab-display [data-drupal-selector="para-color-picker"] div {
  display: block;
  width: 100%;
}

.pb__tab-display [data-drupal-selector="para-color-picker"] label {
  padding-block-start: 12px;
  padding-inline-end: 16px;
  padding-block-end: 0;
  padding-inline-start: 4px;
  width: 100%;
  text-align: var(--pb-text-align-start);
}
