@use 'sass:map';

@use './shared' as *;
@use './design' as *;
@use './input.scss' as input;

$color-picker: () !default;
$color-picker: map.merge(
  (
    marker-color: value('content-color-humble'),
    marker-b-color: value('border-color-base'),
    marker-border: value('border-shape') value('color-picker-marker-b-color'),
    marker-radius: value('radius-small'),
    marker-bg-image:
      url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg=='),
    arrow-color: value('content-color-secondary'),
    pane-bg-color: value('bg-color-base'),
    pane-radius: value('radius-base'),
    pane-shadow: value('shadow-base'),
    unit-s-color: value('color-primary-opacity-6'),
    d-color: value('border-color-light-2'),
    divider: value('border-shape') value('color-picker-d-color'),
    pointer-size: 6px,
    handler-size: 6px,
    handler-bg-color: value('color-white'),
    handler-b-color: value('border-color-base'),
    handler-border: value('border-shape') value('color-picker-handler-b-color'),
    handler-radius: 3px,
    shortcut-b-color: value('border-color-base'),
    shortcut-b-color-hover: value('color-primary-base'),
    shortcut-radius: value('radius-base'),
    shortcut-width: 20px,
    shortcut-height: 16px
  ),
  $color-picker
);

.#{$namespace}-color-picker {
  &-vars {
    @include define-preset-values('color-picker', $color-picker);
  }

  @include basis {
    display: inline-flex;
  }

  @include input.handler(#{&}__selector);

  &__selector {
    width: auto;
    cursor: pointer;
  }

  &--disabled &__selector {
    cursor: not-allowed;
  }

  &__control {
    display: flex;
    align-items: center;
  }

  &__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 8px);
    min-width: 40px;
    height: 100%;
    margin-inline-end: 8px;
    overflow: hidden;
    color: value('color-picker-marker-color');
    border: value('color-picker-marker-border');
    border-radius: value('color-picker-marker-radius');

    &--with-label {
      width: 24px;
      min-width: 24px;
    }
  }

  &--alpha &__marker {
    background-image: value('color-picker-marker-bg-image');
  }

  &--empty &__marker {
    background-image: none;
  }

  &__label {
    display: flex;
    margin-inline-end: 6px;
    line-height: 1;
    white-space: nowrap;
  }

  &__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: value('color-picker-arrow-color');
    transition: value('transition-transform');
  }

  &--focused &__arrow {
    transform: rotate(180deg);
  }

  &__panel {
    width: 270px;
    background-color: value('color-picker-pane-bg-color');
    border-radius: value('color-picker-pane-radius');
    box-shadow: value('color-picker-pane-shadow');
  }

  &__section {
    width: 100%;
    padding: 8px 8px 0;
  }

  &__palette {
    position: relative;
    width: 100%;
    height: 188px;
    cursor: crosshair;
    outline: 0;
    transition: value('transition-shadow');

    &:focus {
      box-shadow: value('shadow-focus') value('color-picker-unit-s-color');
    }
  }

  &__saturation,
  &__value,
  &__opacity {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  &__saturation {
    background: linear-gradient(90deg, #fff, hsl(0deg 0% 100% / 0%));
  }

  &__value {
    background: linear-gradient(0deg, #000, transparent);
  }

  &__hue,
  &__alpha {
    position: relative;
    width: 100%;
    height: 14px;
    margin-top: 10px;
    cursor: pointer;
    outline: 0;
    transition: value('transition-shadow');

    &:focus {
      box-shadow: value('shadow-focus') value('color-picker-unit-s-color');
    }
  }

  &__hue {
    background: linear-gradient(
      90deg,
      red 0,
      #ff0 17%,
      #0f0 33%,
      #0ff 50%,
      #00f 67%,
      #f0f 83%,
      red
    );
  }

  &__alpha {
    background-image: value('color-picker-marker-bg-image');
  }

  &__action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px;
    margin-top: 10px;
    border-top: value('color-picker-divider');

    .#{$namespace}-button {
      margin-inline-start: 4px !important;
    }

    .#{$namespace}-input {
      width: 100%;
    }
  }

  &__palette-handler {
    position: absolute;
    user-select: none;
    border: value('border-shape') value('color-black');
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }

  &__palette-pointer {
    width: value('color-picker-pointer-size');
    height: value('color-picker-pointer-size');
    border: value('border-shape') value('color-white');
    border-radius: 50%;
  }

  &__hue-handler,
  &__alpha-handler {
    position: absolute;
    top: 0;
    bottom: 0;
    width: value('color-picker-handler-size');
    background-color: value('color-picker-handler-bg-color');
    border: value('color-picker-handler-border');
    border-radius: value('color-picker-handler-radius');
    transform: translateX(-50%);
  }

  &__shortcuts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    outline: 0;
  }

  &__shortcut-item {
    width: value('color-picker-shortcut-width');
    height: value('color-picker-shortcut-height');
    margin: 4px;
    cursor: pointer;
    border-radius: value('color-picker-shortcut-radius');
    box-shadow: value('shadow-border') value('color-picker-shortcut-b-color');
    transition: box-shadow 200ms;

    &:hover {
      box-shadow: 0 0 2px 2px value('color-picker-shortcut-b-color-hover');
    }

    &--hitting {
      box-shadow: 0 0 2px 2px value('color-picker-shortcut-b-color-hover');
    }
  }

  &__input {
    flex: 1 0 0;
    width: auto;
    min-width: 0;
  }

  &__clear {
    @include clean-button;
  }
}