@import 'scss/variables';

// 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 {
  padding: 10px;

  @include themed {
    background: t($modal-secondaryColour);
    border-radius: t($borderRadius);
    box-shadow: t($boxShadow);
  }
}

.input-field .label {
  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 {
  @include themed {
    background-color: t($modal-secondaryColour) !important;
    color: t($color) !important;
  }
}

.colourInput {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row-reverse;
  gap: 20px;
}

.gradient-controls {
  margin-bottom: 10px !important;
  width: auto !important;
}

.colourReset {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-field .input-container .input {
  text-align: center;
}