:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  // Popover
  --neeto-ui-colorpicker-popover-width: 14rem;
  --neeto-ui-colorpicker-popover-padding: 0.75rem;

  // Pointer
  --neeto-ui-colorpicker-pointer-width: 1.25rem;
  --neeto-ui-colorpicker-pointer-height: 1.25rem;

  // Palette Wrapper
  --neeto-ui-colorpicker-palette-wrapper-margin: 0.75rem;

  // Palette Item
  --neeto-ui-colorpicker-palette-item-width: 1.5rem;
  --neeto-ui-colorpicker-palette-item-height: 1.5rem;
  --neeto-ui-colorpicker-palette-item-border-width: 1px;
  --neeto-ui-colorpicker-palette-item-border-color: rgb(var(--neeto-ui-gray-200));
  --neeto-ui-colorpicker-palette-item-border-radius: 0.3125rem;
  --neeto-ui-colorpicker-palette-item-padding: 0;
  --neeto-ui-colorpicker-palette-item-margin-left: 0;

  // Target Wrapper
  --neeto-ui-colorpicker-target-wrapper-gap: 0.5rem;

  // Target
  --neeto-ui-colorpicker-target-bg-color: rgb(var(--neeto-ui-white));
  --neeto-ui-colorpicker-target-border-radius: var(--neeto-ui-rounded);
  --neeto-ui-colorpicker-target-border-width: 1px;
  --neeto-ui-colorpicker-target-border-color: rgb(var(--neeto-ui-gray-400));
  --neeto-ui-colorpicker-target-height: 1.75rem;
  --neeto-ui-colorpicker-target-padding: 0.1875rem;
  --neeto-ui-colorpicker-target-gap: 0.75rem;

  // Targer: Hover
  --neeto-ui-colorpicker-target-hover-border-color: rgb(var(--neeto-ui-gray-700));

  // Targer: Focus Visible
  --neeto-ui-colorpicker-target-focus-visible-border-color: rgb(var(--neeto-ui-primary-500));
  --neeto-ui-colorpicker-target-focus-visible-box-shadow: 0 0 0 3px rgba(var(--neeto-ui-primary-500), 15%);
  --neeto-ui-colorpicker-target-focus-visible-outline: none;

  // Target - Color
  --neeto-ui-colorpicker-target-color-block-border-radius: var(--neeto-ui-rounded);
  --neeto-ui-colorpicker-target-color-block-width: 1.25rem;
  --neeto-ui-colorpicker-target-color-block-height: 1.25rem;

  // Target - Hexcode
  --neeto-ui-colorpicker-target-hexcode-font-size: var(--neeto-ui-text-sm);
  --neeto-ui-colorpicker-target-hexcode-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-colorpicker-target-hexcode-font-weight: var(--neeto-ui-font-medium);
  --neeto-ui-colorpicker-target-hexcode-min-width: 4.5rem;
}

.neeto-ui-colorpicker__dropdown{
  .neeto-ui-dropdown__popup{
    max-height: var(--neeto-ui-dropdown-popup-max-height);
  }
}

.neeto-ui-colorpicker__popover {
  width: var(--neeto-ui-colorpicker-popover-width);
  padding: var(--neeto-ui-colorpicker-popover-padding);

  .neeto-ui-colorpicker__palette-wrapper {
    margin-top: var(--neeto-ui-colorpicker-palette-wrapper-margin);

    &--hidden-picker {
      --neeto-ui-colorpicker-palette-wrapper-margin: 0px;
    }
  }

  .neeto-ui-colorpicker__pointer .react-colorful__saturation-pointer {
    width: var(--neeto-ui-colorpicker-pointer-width);
    height: var(--neeto-ui-colorpicker-pointer-height);
  }
}

.neeto-ui-color-palette__item {
  width: var(--neeto-ui-colorpicker-palette-item-width);
  height: var(--neeto-ui-colorpicker-palette-item-height);
  border: var(--neeto-ui-colorpicker-palette-item-border-width) solid var(--neeto-ui-colorpicker-palette-item-border-color);
  transition: var(--neeto-ui-transition);
  padding: var(--neeto-ui-colorpicker-palette-item-padding);
  border-radius: var(--neeto-ui-colorpicker-palette-item-border-radius);
  margin-left: var(--neeto-ui-colorpicker-palette-item-margin-left);
  cursor: pointer;
  overflow: hidden;

  &.active {
    --neeto-ui-colorpicker-palette-item-border-color: rgb(var(--neeto-ui-gray-500));
  }

  div {
    width: 100%;
    min-height: 100%;
  }
}

.neeto-ui-colorpicker__target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--neeto-ui-colorpicker-target-bg-color);
  border-radius: var(--neeto-ui-colorpicker-target-border-radius);
  border: var(--neeto-ui-colorpicker-target-border-width) solid var(--neeto-ui-colorpicker-target-border-color);
  transition: var(--neeto-ui-transition);
  height: var(--neeto-ui-colorpicker-target-height);
  padding: var(--neeto-ui-colorpicker-target-padding);
  gap: var(--neeto-ui-colorpicker-target-gap);

  &:hover {
    border-color: var(--neeto-ui-colorpicker-target-hover-border-color);
  }

  &:focus-visible{
    border-color: var(--neeto-ui-colorpicker-target-focus-visible-border-color);
    box-shadow: var(--neeto-ui-colorpicker-target-focus-visible-box-shadow);
    outline: var(--neeto-ui-colorpicker-target-focus-visible-outline);
  }

  .neeto-ui-colorpicker-target__color-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--neeto-ui-colorpicker-target-wrapper-gap);
  }

  .neeto-ui-colorpicker-target__color {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: var(--neeto-ui-colorpicker-target-color-block-border-radius);
    width: var(--neeto-ui-colorpicker-target-color-block-width);
    height: var(--neeto-ui-colorpicker-target-color-block-height);
    border-width: 1px;
    border-style: solid;
  }

  .neeto-ui-colorpicker-target__code {
    font-size: var(--neeto-ui-colorpicker-target-hexcode-font-size);
    color: rgb(var(--neeto-ui-gray-800));
    font-weight: var(--neeto-ui-colorpicker-target-hexcode-font-weight);
    min-width: var(--neeto-ui-colorpicker-target-hexcode-min-width);
  }

  &-size--medium {
    --neeto-ui-colorpicker-target-height: 2rem;
    --neeto-ui-colorpicker-target-padding: 0.25rem;
    --neeto-ui-colorpicker-target-color-block-width: 1.5rem;
    --neeto-ui-colorpicker-target-color-block-height: 1.5rem;
  }

  &-size--large {
    --neeto-ui-colorpicker-target-height: 2.5rem;
    --neeto-ui-colorpicker-target-padding: 0.4375rem;
    --neeto-ui-colorpicker-target-color-block-width: 1.5rem;
    --neeto-ui-colorpicker-target-color-block-height: 1.5rem;
  }
}

.neetix-colorpicker {
  --neeto-ui-colorpicker-palette-item-border-radius: var(--neeto-ui-rounded-full);
  --neeto-ui-colorpicker-target-color-block-border-radius: var(--neeto-ui-rounded-full);
}
