@mixin colorPicker() {
  $checkerboard-dark: $background-color;
  $checkerboard-light: $font-color;

  .esri-color-picker {
    display: inline-block;
    position: relative;
    width: max-content;
    height: max-content;

    &__toggle-button {
      position: relative;
      z-index: 1;
      border: solid 1px var(--calcite-color-border-1);
      background: var(--esri-color-picker-value);
    }

    &__bg-pattern {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0.3;
      z-index: 0;

      // Checkerboard pattern (see https://www.magicpattern.design/tools/css-backgrounds)
      background-color: $checkerboard-light;
      background-image: repeating-linear-gradient(
          45deg,
          $checkerboard-dark 25%,
          transparent 25%,
          transparent 75%,
          $checkerboard-dark 75%,
          $checkerboard-dark
        ),
        repeating-linear-gradient(
          45deg,
          $checkerboard-dark 25%,
          $checkerboard-light 25%,
          $checkerboard-light 75%,
          $checkerboard-dark 75%,
          $checkerboard-dark
        );
      background-position:
        0 0,
        calc(100% / 2) calc(100% / 2);
      background-size: calc(100% / 2) calc(100% / 2);
      width: 100%;
      height: 100%;
    }

    &__popover {
      --calcite-color-border-1: none;
    }
  }
}

@if $include_ColorPicker == true {
  @include colorPicker();
}