@use 'scss/variables' as *;

// Main wrapper - cleaner appearance without heavy border
#rbgcp-wrapper,
#rbgcp-color-picker-dark {
  @include themed {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }
}

// Override any remaining dark backgrounds from inline styles
div[style*='background: rgb(32, 32, 32)'] {
  @include themed {
    background: transparent !important;
  }
}

// Canvas wrapper - smoother corners
#rbgcp-square-canvas-wrapper-dark {
  border-radius: 6px !important;
  overflow: hidden;
}

// Bottom controls section
#rbgcp-body {
  @include themed {
    background: t($modal-secondaryColour) !important;
  }
}

// Control wrappers - SPECIFIC targeting to avoid breaking sliders
#rbgcp-controls-wrapper-dark,
#rbgcp-color-type-btns-dark,
#rbgcp-control-rightside-wrapper-dark,
#rbgcp-inputs-wrap-dark {
  @include themed {
    background: t($modal-secondaryColour) !important;
    border-radius: 6px !important;
  }
}

// Slider area backgrounds - soft grey for light theme
#rbgcp-hue-wrap-dark,
#rbgcp-opacity-wrapper-dark {
  position: relative !important;

  // Add a soft background wrapper
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 14px;

    @include themed {
      .light & {
        background: rgba(0, 0, 0, 0.08) !important;
      }
      .dark & {
        background: rgba(0, 0, 0, 0.3) !important;
      }
    }
  }
}

// Input fields and buttons - cover all variations
#rbgcp-solid-btn,
#rbgcp-solid-btn-dark,
#rbgcp-gradient-btn,
#rbgcp-gradient-btn-dark,
#rbgcp-hex-input,
#rbgcp-hex-input-dark,
#rbgcp-input,
#rbgcp-R-input-dark,
#rbgcp-G-input-dark,
#rbgcp-B-input-dark,
#rbgcp-A-input-dark,
input[id*='rbgcp'],
#rbgcp-eyedropper-btn,
#rbgcp-advanced-btn,
#rbgcp-advanced-btn-dark,
#rbgcp-comparibles-btn,
#rbgcp-color-model-btn,
#rbgcp-color-model-btn-dark,
#rbgcp-gradient-controls-wrap div {
  @include themed {
    background: t($btn-background) !important;
    color: t($color) !important;
    border: 1px solid rgba(128, 128, 128, 0.2) !important;
  }
}

// Active state for Solid/Gradient buttons - check for black background or box-shadow
#rbgcp-solid-btn-dark[style*='background: black'],
#rbgcp-solid-btn-dark[style*='background: rgb(0, 0, 0)'],
#rbgcp-gradient-btn-dark[style*='background: black'],
#rbgcp-gradient-btn-dark[style*='background: rgb(0, 0, 0)'] {
  @include themed {
    background: t($link) !important;
    color: white !important;
    border-color: t($link) !important;
    font-weight: 700 !important;
  }
}

// Icon buttons - make icons more visible
#rbgcp-advanced-btn-dark,
#rbgcp-color-model-btn-dark {
  svg,
  svg polyline,
  svg line,
  svg path {
    @include themed {
      stroke: t($color) !important;
      fill: none !important;
    }
  }

  &:hover {
    @include themed {
      background: t($btn-backgroundHover) !important;
      border-color: t($link) !important;
    }

    svg,
    svg polyline,
    svg line,
    svg path {
      @include themed {
        stroke: t($link) !important;
      }
    }
  }
}

// Labels under inputs
#rbgcp-hex-input-wrapper-dark div,
#rbgcp-R-input-wrapper-dark div,
#rbgcp-G-input-wrapper-dark div,
#rbgcp-B-input-wrapper-dark div,
#rbgcp-A-input-wrapper-dark div {
  @include themed {
    color: t($color) !important;
  }
}

// Hover states
#rbgcp-gradient-btn:hover,
#rbgcp-solid-btn:hover,
#rbgcp-eyedropper-btn:hover,
#rbgcp-advanced-btn:hover,
#rbgcp-comparibles-btn:hover,
#rbgcp-color-model-btn:hover,
#rbgcp-point-delete-btn:hover,
#rbgcp-gradient-controls-wrap div:hover {
  cursor: pointer;

  @include themed {
    background: t($btn-backgroundHover) !important;
    border-color: t($color) !important;
  }
}

// Active/selected button states
#rbgcp-solid-btn[style*='background: rgb(242, 242, 242)'],
#rbgcp-gradient-btn[style*='background: rgb(242, 242, 242)'] {
  @include themed {
    background: t($btn-backgroundHover) !important;
    border-color: t($link) !important;
  }
}

#rbgcp-gradient-controls-wrap {
  background: none !important;
}

#rbgcp-point-delete-btn {
  @include themed {
    background: t($btn-background) !important;
    border: 1px solid t($boxShadow) !important;
  }

  height: 28px;
}

// Text labels
#rbgcp-wrapper {
  label {
    @include themed {
      color: t($color) !important;
    }
  }
}

// Reset button styling
.colourReset {
  margin-top: 12px;

  .link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;

    @include themed {
      color: t($link);
      background: t($modal-secondaryColour);

      &:hover {
        background: t($btn-backgroundHover);
        transform: translateY(-1px);
      }
    }

    svg {
      font-size: 16px;
    }
  }
}
