@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'common/var' as *;

$color-picker-size: () !default;
$color-picker-size: map.merge($common-component-size, $color-picker-size);

@mixin alpha-bg {
  background-image: linear-gradient(
      45deg,
      getCssVar('color-picker', 'alpha-bg-a') 25%,
      getCssVar('color-picker', 'alpha-bg-b') 25%
    ),
    linear-gradient(
      135deg,
      getCssVar('color-picker', 'alpha-bg-a') 25%,
      getCssVar('color-picker', 'alpha-bg-b') 25%
    ),
    linear-gradient(
      45deg,
      getCssVar('color-picker', 'alpha-bg-b') 75%,
      getCssVar('color-picker', 'alpha-bg-a') 75%
    ),
    linear-gradient(
      135deg,
      getCssVar('color-picker', 'alpha-bg-b') 75%,
      getCssVar('color-picker', 'alpha-bg-a') 75%
    );
  background-size: 12px 12px;
  background-position: 0 0, 6px 0, 6px -6px, 0 6px;
}

@include b(color-picker) {
  display: inline-block;
  position: relative;
  line-height: normal;
  outline: none;
  height: map.get($color-picker-size, 'default');
  width: map.get($color-picker-size, 'default');

  &:hover:not(.is-disabled, .is-focused) {
    .#{$namespace}-color-picker__trigger {
      border-color: getCssVar('border-color-hover');
    }
  }

  &:focus-visible:not(.is-disabled) {
    .#{$namespace}-color-picker__trigger {
      outline: 2px solid getCssVar('color-primary');
      outline-offset: 1px;
    }
  }

  @include when(focused) {
    .#{$namespace}-color-picker__trigger {
      border-color: getCssVar('color-primary');
    }
  }

  @include when(disabled) {
    .#{$namespace}-color-picker__trigger {
      cursor: not-allowed;
      background-color: getCssVar('fill-color', 'light');
    }

    @include e(color) {
      opacity: 0.3;
    }
  }

  @each $size in (large, small) {
    @include m($size) {
      height: map.get($color-picker-size, $size);
      width: map.get($color-picker-size, $size);
    }
  }

  @include m(small) {
    .#{$namespace}-color-picker__icon,
    .#{$namespace}-color-picker__empty {
      transform: scale(0.8);
    }
  }

  @include e(trigger) {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    box-sizing: border-box;
    height: 100%;
    width: 100%;
    padding: 4px;
    border: 1px solid getCssVar('border-color');
    border-radius: 4px;
    font-size: 0;
    position: relative;
    cursor: pointer;
  }

  @include e(color) {
    position: relative;
    display: block;
    box-sizing: border-box;
    border: 1px solid getCssVar('text-color', 'secondary');
    border-radius: getCssVar('border-radius-small');
    width: 100%;
    height: 100%;
    text-align: center;

    @include when(alpha) {
      @include alpha-bg;
      // background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
    }
  }

  @include e(color-inner) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  & .#{$namespace}-color-picker__empty {
    font-size: 12px;
    color: getCssVar('text-color', 'secondary');
  }

  & .#{$namespace}-color-picker__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: $color-white;
    font-size: 12px;
  }

  @include e(panel) {
    background-color: $color-white;
    border-radius: getCssVar('border-radius-base');
    box-shadow: map.get($dropdown, 'menu-box-shadow');
    &.#{$namespace}-popper {
      border: 1px solid getCssVar('border-color-lighter');
    }
  }
}

.#{bem('color-picker')},
.#{bem('color-picker', 'panel')} {
  @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#ccc');
  @include set-css-var-value(('color-picker', 'alpha-bg-b'), 'transparent');
}

.dark {
  .#{bem('color-picker')},
  .#{bem('color-picker', 'panel')} {
    @include set-css-var-value(('color-picker', 'alpha-bg-a'), '#333333');
  }
}