// The following CSS is to work around some assumptions made by the react-color-gradient-picker
* {
  // workaround for https://github.com/arthay/react-color-gradient-picker/issues/11
  box-sizing: inherit;
}

div.picker-area > div.preview > div.color-hue-alpha > div.alpha,
div.color-preview-area > div > div:nth-child(5) {
  display: none;
}

.ui-color-picker {
  margin: 8px -12px;
  background-color: var(--background) !important;
}

.input-field .label {
  color: inherit;
  color: var(--modal-text) !important;
}

// other styling for themes support etc
.gradient-degrees {
  border: 3px solid var(--modal-text) !important;
}

.gradient-degree-pointer {
  background-color: var(--modal-text) !important;
}

.gradient-type-item.active::after {
  border: 2px solid var(--modal-text) !important;
}

.text-input,
.number-input {
  background-color: var(--sidebar) !important;
  color: var(--modal-text) !important;
}

.colourInput {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  flex-flow: row-reverse;
}
