@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-color-picker-label-wrapper') {
  --sky-override-colorpicker-label-color: var(--sky-text-color-default);
  --sky-override-colorpicker-label-space: 5px;
  --sky-override-colorpicker-label-font-size: 15px;
  --sky-override-colorpicker-label-font-weight: 400;
  --sky-override-colorpicker-label-line-height: normal;
}

@include compatMixins.sky-default-overrides('.sky-colorpicker-hint-text') {
  --sky-override-colorpicker-hint-text-space: var(--sky-margin-stacked-xs);
}

@include compatMixins.sky-default-overrides('.sky-input-group') {
  /* spell-checker:disable-next-line */
  --sky-override-colorpicker-button-background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cdefs%3E%3Cpath%20id%3D%22a%22%20d%3D%22M0%200h30v30H0V0zm14.5%204H4v22h14v-8h8V4H14.5z%22%2F%3E%3C%2Fdefs%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cuse%20fill%3D%22%23FFF%22%20xlink%3Ahref%3D%22%23a%22%2F%3E%3Cpath%20stroke%3D%22%23CCC%22%20d%3D%22M.5.5v29h29V.5H.5zm18%2018v8h-15v-23h23v15h-8z%22%2F%3E%3Cpath%20fill%3D%22%23292A2B%22%20d%3D%22M23.5%2025L21%2022h5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
  --sky-override-colorpicker-button-border-radius: 0;
  --sky-override-colorpicker-button-border-radius: 0;
  --sky-override-colorpicker-button-box-shadow: none;
  --sky-override-colorpicker-button-error-border: 1px solid
    var(--sky-highlight-color-danger);
  --sky-override-colorpicker-button-error-box-shadow: #{0 0 8px
    rgba($sky-highlight-color-danger, 0.6)};
  --sky-override-colorpicker-button-focus-outline: -webkit-focus-ring-color auto
    5px;
  --sky-override-colorpicker-button-size: 30px;
  --sky-override-colorpicker-disabled-cursor: default;
  --sky-override-colorpicker-disabled-opacity: 0.65;
  --sky-override-colorpicker-icon-font-size: 12px;
  --sky-override-colorpicker-icon-offset: 2px;
}

@include compatMixins.sky-default-overrides('.sky-colorpicker-container') {
  --sky-override-colorpicker-alpha-margin-top: 16px;
  --sky-override-colorpicker-background-color: #fff;
  --sky-override-colorpicker-bottom-radius: 0;
  --sky-override-colorpicker-box-padding: 4px 8px;
  --sky-override-colorpicker-current-color-padding: 16px 8px;
  --sky-override-colorpicker-current-controls-padding: 12px 8px;
  --sky-override-colorpicker-footer-border-top: #{1px solid
    $sky-border-color-neutral-light};
  --sky-override-colorpicker-footer-button-spacing: 0;
  --sky-override-colorpicker-footer-padding: 15px;
  --sky-override-colorpicker-hue-alpha-height: 16px;
  --sky-override-colorpicker-input-font-size: 14px;
  --sky-override-colorpicker-input-height: 26px;
  --sky-override-colorpicker-input-label-margin: 0 0 8px 0;
  --sky-override-colorpicker-input-padding: 1px;
  --sky-override-colorpicker-input-text-align: center;
  --sky-override-colorpicker-rgba-padding: 7px 15px 15px;
  --sky-override-colorpicker-rgba-space-between: 8px;
  --sky-override-colorpicker-selected-color-left: 8px;
  --sky-override-colorpicker-selected-color-size: 40px;
  --sky-override-colorpicker-selected-color-top: 16px;
  --sky-override-colorpicker-selector-size: 17px;
  --sky-override-colorpicker-swatch-area-padding: 0 9px 15px 9px;
  --sky-override-colorpicker-swatch-border-radius: 0;
  --sky-override-colorpicker-swatch-border: #{1px solid
    $sky-border-color-neutral-light};
  --sky-override-colorpicker-swatch-hover-border: #{$sky-color-white solid 2px};
  --sky-override-colorpicker-swatch-hover-box-shadow: #{0 0 0 1px
      $sky-border-color-neutral-medium,
    0 0 0 2px $sky-border-color-neutral-light};
  --sky-override-colorpicker-swatch-hover-margin: 4px;
  --sky-override-colorpicker-swatch-margin: 5px;
  --sky-override-colorpicker-swatch-size-hover: 34px;
  --sky-override-colorpicker-swatch-size: 32px;
  --sky-override-colorpicker-width: 270px;
  --sky-override-colorpicker-rgba-font-size: 18px;
}

@include compatMixins.sky-modern-overrides(
  '.sky-color-picker-label-wrapper',
  false
) {
  --sky-override-colorpicker-label-font-size: 16px;
}

@include compatMixins.sky-modern-overrides('.sky-input-group', false) {
  --sky-override-colorpicker-button-border-color: var(--modern-color-gray-15);
  --sky-override-colorpicker-button-size: 40px;
  --sky-override-colorpicker-icon-font-size: 16px;
  --sky-override-colorpicker-reset-button-size: 40px;
  --sky-override-colorpicker-reset-font-size: 1.33em;
}

@include compatMixins.sky-modern-overrides(
  '.sky-colorpicker-container',
  false
) {
  --sky-override-colorpicker-footer-padding: 10px 10px 15px;
  --sky-override-colorpicker-rgba-padding: 0 10px 10px;
  --sky-override-colorpicker-selected-color-size: 46px;
  --sky-override-colorpicker-swatch-area-padding: 10px 10px 15px;
  --sky-override-colorpicker-swatch-border-radius: 4px;
  --sky-override-colorpicker-swatch-size-hover: 46px;
  --sky-override-colorpicker-swatch-size: 46px;
  --sky-override-colorpicker-width: 310px;
}

sky-colorpicker.sky-form-field-stacked {
  display: block;
}

.sky-colorpicker-container {
  position: fixed;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: var(
    --sky-override-colorpicker-background-color,
    var(--sky-color-background-container-menu)
  );
  border-radius: 0 0 var(--sky-border-radius-s) var(--sky-border-radius-s);
}

.sky-colorpicker-button {
  // the padding between the inner and outer borders should be 2X the base border width. Since the borders are stacked
  // we need to add the size of the outer border to the intended padding size, and the outer border and padding size to the inner border
  --sky-colorpicker-border-padding-size: calc(
    var(--sky-border-width-input-base) +
      calc(var(--sky-border-width-input-base) * 2)
  );
  --sky-color-picker-inner-border-size: calc(
    var(--sky-colorpicker-border-padding-size) +
      var(--sky-border-width-input-base)
  );
  height: var(
    --sky-override-colorpicker-button-size,
    calc(
      calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m)) +
        calc(var(--sky-space-inset-balanced-s) * 2)
    )
  );
  width: var(
    --sky-override-colorpicker-button-size,
    calc(
      calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m)) +
        calc(var(--sky-space-inset-balanced-s) * 2)
    )
  );
  border: none;
  border-radius: var(
    --sky-override-colorpicker-button-border-radius,
    var(--sky-border-radius-s)
  );
  box-shadow: var(
    --sky-override-colorpicker-button-box-shadow,
    inset 0 0 0 var(--sky-border-width-input-base)
      var(
        --sky-override-colorpicker-button-border-color,
        var(--sky-color-border-input-base)
      ),
    inset 0 0 0 var(--sky-colorpicker-border-padding-size)
      var(--sky-color-background-container-base),
    inset 0 0 0 var(--sky-color-picker-inner-border-size)
      var(
        --sky-override-colorpicker-button-border-color,
        var(--sky-color-border-input-base)
      )
  );
  cursor: pointer;
  position: relative;

  &:hover {
    box-shadow: var(
      --sky-override-colorpicker-button-box-shadow,
      inset 0 0 0 var(--sky-border-width-input-hover)
        var(--sky-color-border-input-hover),
      inset 0 0 0 var(--sky-colorpicker-border-padding-size)
        var(--sky-color-background-container-base),
      inset 0 0 0 var(--sky-color-picker-inner-border-size)
        var(
          --sky-override-colorpicker-button-border-color,
          var(--sky-color-border-input-base)
        )
    );
  }

  &:focus-visible:not(:active) {
    box-shadow: var(
      --sky-override-colorpicker-button-box-shadow,
      inset 0 0 0 var(--sky-border-width-input-focus)
        var(--sky-color-border-input-focus),
      inset 0 0 0 var(--sky-colorpicker-border-padding-size)
        var(--sky-color-background-container-base),
      inset 0 0 0 var(--sky-color-picker-inner-border-size)
        var(
          --sky-override-colorpicker-button-border-color,
          var(--sky-color-border-input-base)
        ),
      var(--sky-elevation-focus)
    );
    outline: var(--sky-override-colorpicker-button-focus-outline);
  }

  &.sky-colorpicker-button-disabled {
    cursor: var(--sky-override-colorpicker-disabled-cursor, not-allowed);
    box-shadow: var(
      --sky-override-colorpicker-button-box-shadow,
      inset 0 0 0 var(--sky-border-width-input-disabled)
        var(--sky-color-border-action-secondary-disabled),
      inset 0 0 0 var(--sky-colorpicker-border-padding-size)
        var(--sky-color-background-input-disabled),
      inset 0 0 0 var(--sky-color-picker-inner-border-size)
        var(--sky-color-border-action-secondary-disabled)
    );
  }

  .sky-colorpicker-button-icon {
    position: relative;
    // TODO: remove positioning when updating to SVG icons
    bottom: var(--sky-override-colorpicker-icon-offset, 1px);
    font-size: var(
      --sky-override-colorpicker-icon-font-size,
      var(--sky-size-icon-m)
    );
  }
}

.sky-colorpicker-disabled {
  opacity: var(--sky-override-colorpicker-disabled-opacity);
  cursor: default;
}

// This ensures the normalize CSS won't replace the active state of a button's background. Used by default theme only.
.sky-colorpicker-button,
.sky-colorpicker-button:active {
  background-image: var(--sky-override-colorpicker-button-background-image);
}

.sky-colorpicker-hidden {
  width: 0px;
  height: 0px;
  overflow: hidden;
}

.sky-colorpicker-hint-text {
  margin-top: var(
    --sky-override-colorpicker-hint-text-space,
    var(--sky-space-gap-stacked_supplemental-s)
  );
}

.sky-colorpicker-error {
  background-origin: border-box;
  box-shadow: var(
    --sky-override-colorpicker-button-error-box-shadow,
    inset 0 0 0 var(--sky-border-width-input-error)
      var(--sky-color-border-input-error),
    inset 0 0 0 var(--sky-colorpicker-border-padding-size)
      var(--sky-color-background-container-base),
    inset 0 0 0
      calc(
        var(--sky-colorpicker-border-padding-size) +
          var(--sky-border-width-action-base)
      )
      var(
        --sky-override-colorpicker-button-border-color,
        var(--sky-color-border-input-base)
      )
  );

  border: var(--sky-override-colorpicker-button-error-border);
  outline: none;
}

// only applies to default theme
.sky-colorpicker-reset-button {
  background-color: $sky-color-white;
  margin-left: $sky-margin-half;
  @include mixins.sky-border(light, top, right, bottom, left);
  box-shadow:
    inset 0 0 0 2px $sky-color-white,
    inset 0 0 0 3px $sky-border-color-neutral-medium;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: $sky-text-color-deemphasized;
  &:hover {
    color: darken($sky-text-color-deemphasized, 20%);
  }
  &.sky-colorpicker-reset-button-disabled {
    color: $sky-text-color-deemphasized;
    cursor: default;
  }
}

// only applies to modern theme
.sky-input-group .sky-colorpicker-reset-button-modern {
  width: var(--sky-override-colorpicker-reset-button-size);
  height: var(--sky-override-colorpicker-reset-button-size);
  margin-left: var(--sky-space-gap-action_group-m);

  i {
    font-size: var(
      --sky-override-colorpicker-reset-font-size,
      var(--sky-size-icon-s)
    );
  }

  &.sky-colorpicker-reset-button-disabled {
    background-color: var(--sky-color-background-action-tertiary-disabled);
  }
}

// only applies to modern theme. Default theme chevron is part of the background image
.sky-input-group .sky-colorpicker-button-modern-chevron {
  position: absolute;
  background-color: var(--sky-color-background-container-base);
  border-top-left-radius: calc(
    var(--sky-border-radius-s) - var(--sky-colorpicker-border-padding-size)
  );
  border-bottom-right-radius: calc(
    var(--sky-border-radius-s) - var(--sky-colorpicker-border-padding-size)
  );
  border-left: var(--sky-border-width-input-base) solid
    var(
      --sky-override-colorpicker-button-border-color,
      var(--sky-color-border-input-base)
    );
  border-top: var(--sky-border-width-input-base) solid
    var(
      --sky-override-colorpicker-button-border-color,
      var(--sky-color-border-input-base)
    );
  bottom: var(--sky-colorpicker-border-padding-size);
  color: var(--sky-color-icon-default);
  right: var(--sky-colorpicker-border-padding-size);
  font-size: var(--sky-size-icon-xs);

  i {
    height: var(--sky-size-icon-xs);
    width: var(--sky-size-icon-xs);
  }
  &.sky-colorpicker-button-modern-chevron-disabled {
    color: var(--sky-color-text-deemphasized);
  }
}

.sky-colorpicker-footer {
  border-top: var(--sky-override-colorpicker-footer-border-top, none);
  padding: var(
    --sky-override-colorpicker-footer-padding,
    var(--sky-space-inset-pillarbox-2_3-top-m)
      var(--sky-space-inset-pillarbox-2_3-right-m)
      var(--sky-space-inset-pillarbox-2_3-bottom-m)
      var(--sky-space-inset-pillarbox-2_3-left-m)
  );

  .sky-btn-colorpicker-apply {
    margin-right: var(
      --sky-override-colorpicker-footer-button-spacing,
      var(--sky-space-gap-action_group-m)
    );
  }
}

.sky-colorpicker * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
}

.sky-colorpicker {
  cursor: default;
  width: var(
    --sky-override-colorpicker-width,
    calc(
      var(--sky-size-width-viewport-smallest) - calc(
          var(--sky-space-inset-balanced-m) * 2
        )
    )
  );
  height: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  i {
    cursor: default;
    position: relative;
  }
  input {
    text-align: var(--sky-override-colorpicker-input-text-align);
    font-size: var(--sky-override-colorpicker-input-font-size);
    height: var(--sky-override-colorpicker-input-height);
    &:invalid {
      box-shadow: none;
    }
    &:-moz-submit-invalid {
      box-shadow: none;
    }
    &:-moz-ui-invalid {
      box-shadow: none;
    }
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
  // Specificity is required to override sky-form-control's CSS values.
  input[type='number'].sky-form-control {
    -moz-appearance: textfield !important;
  }

  .sky-colorpicker-preset-color-area {
    padding: var(
      --sky-override-colorpicker-swatch-area-padding,
      var(--sky-space-inset-pillarbox-2_3-top-m)
        var(--sky-space-inset-pillarbox-2_3-right-m)
        var(--sky-space-inset-pillarbox-2_3-bottom-m)
        var(--sky-space-inset-pillarbox-2_3-left-m)
    );
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .sky-preset-color {
      cursor: pointer;
      width: var(
        --sky-override-colorpicker-swatch-size,
        calc(
          calc(
              calc(
                  var(--sky-size-width-viewport-smallest) - calc(
                      var(--sky-space-inset-balanced-m) * 2
                    )
                ) - calc(
                  var(--sky-space-inset-pillarbox-2_3-left-m) +
                    var(--sky-space-inset-pillarbox-2_3-right-m)
                ) - calc(var(--sky-space-gap-form-m) * 4)
            ) / 5
        )
      );
      height: var(
        --sky-override-colorpicker-swatch-size,
        calc(
          calc(
              calc(
                  var(--sky-size-width-viewport-smallest) - calc(
                      var(--sky-space-inset-balanced-m) * 2
                    )
                ) - calc(
                  var(--sky-space-inset-pillarbox-2_3-left-m) +
                    var(--sky-space-inset-pillarbox-2_3-right-m)
                ) - calc(var(--sky-space-gap-form-m) * 4)
            ) / 5
        )
      );
      border-radius: var(
        --sky-override-colorpicker-swatch-border-radius,
        var(--sky-border-radius-s)
      );
      margin: var(
        --sky-override-colorpicker-swatch-margin,
        0 var(--sky-space-gap-form-m) var(--sky-space-gap-form-m) 0
      );

      &:not(:active),
      &:not(:hover),
      &:not(:focus) {
        border: var(
          --sky-override-colorpicker-swatch-border,
          var(--sky-border-width-input-base) solid
            var(--sky-color-border-input-base)
        );
      }
    }
    .sky-preset-color:hover {
      cursor: pointer;
      border: var(
        --sky-override-colorpicker-swatch-hover-border,
        var(--sky-border-width-input-base) solid
          var(--sky-color-border-input-base)
      );
      margin: var(
        --sky-override-colorpicker-swatch-hover-margin,
        0 var(--sky-space-gap-form-m) var(--sky-space-gap-form-m) 0
      );
      width: var(
        --sky-override-colorpicker-swatch-size-hover,
        calc(
          calc(
              calc(
                  var(--sky-size-width-viewport-smallest) - calc(
                      var(--sky-space-inset-balanced-m) * 2
                    )
                ) - calc(
                  var(--sky-space-inset-pillarbox-2_3-left-m) +
                    var(--sky-space-inset-pillarbox-2_3-right-m)
                ) - calc(var(--sky-space-gap-form-m) * 4)
            ) / 5
        )
      );
      height: var(
        --sky-override-colorpicker-swatch-size-hover,
        calc(
          calc(
              calc(
                  var(--sky-size-width-viewport-smallest) - calc(
                      var(--sky-space-inset-balanced-m) * 2
                    )
                ) - calc(
                  var(--sky-space-inset-pillarbox-2_3-left-m) +
                    var(--sky-space-inset-pillarbox-2_3-right-m)
                ) - calc(var(--sky-space-gap-form-m) * 4)
            ) / 5
        )
      );
      // TODO: remove when we drop default; modern will inherit this from the btn class
      box-shadow: var(
        --sky-override-colorpicker-swatch-hover-box-shadow,
        inset 0 0 0 var(--sky-border-width-action-hover)
          var(--sky-color-border-action-tertiary-hover)
      );
    }
  }

  div.cursor {
    cursor: default;
    position: relative;
    width: var(
      --sky-override-colorpicker-selector-size,
      calc(var(--sky-font-size-body-m) + 1px)
    );
    height: var(
      --sky-override-colorpicker-selector-size,
      calc(var(--sky-font-size-body-m) + 1px)
    );
    border: $sky-color-white solid 2px;
    outline: thin solid;
  }

  .saturation-lightness {
    cursor: pointer;
    width: 100%;
    height: 170px;
    border: none;
    background-size: 100% 100%;
    background-image: url(https://sky.blackbaudcdn.net/static/skyux-public-assets/1.0.0-beta.4/assets/images/colorpicker/saturation-lightness.webp);
  }

  .box {
    display: flex;
    padding: var(
      --sky-override-colorpicker-box-padding,
      var(--sky-space-inset-pillarbox-1_2-top-l)
        var(--sky-space-inset-pillarbox-1_2-right-l)
        var(--sky-space-inset-pillarbox-1_2-bottom-l)
        var(--sky-space-inset-pillarbox-1_2-left-l)
    );
    .left {
      position: relative;
      padding: var(
        --sky-override-colorpicker-current-color-padding,
        0 var(--sky-space-gap-form-xl) 0 0
      );
    }
    .right {
      flex: 1 1 auto;
      padding: var(--sky-override-colorpicker-current-controls-padding);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .hue {
    cursor: pointer;
    width: 100%;
    height: var(
      --sky-override-colorpicker-hue-alpha-height,
      var(--sky-font-size-body-m)
    );
    border: none;
    background-size: 100% 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwkUFWbCCAAAAFxJREFUaN7t0kEKg0AQAME2x83/n2qu5qCgD1iDhCoYdpnbQC9bbY1qVO/jvc6k3ad91s7/7F1/csgPrujuQ17BDYSFsBAWwgJhISyEBcJCWAgLhIWwEBYIi2f7Ar/1TCgFH2X9AAAAAElFTkSuQmCC');
  }
  .alpha {
    cursor: pointer;
    width: 100%;
    height: var(
      --sky-override-colorpicker-hue-alpha-height,
      var(--sky-font-size-body-m)
    );
    border: none;
    margin-top: var(
      --sky-override-colorpicker-alpha-margin-top,
      var(--sky-space-gap-form-s)
    );
    background-size: 100% 100%;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAQCAYAAAD06IYnAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AIWDwYQlZMa3gAAAWVJREFUaN7tmEGO6jAQRCsOArHgBpyAJYGjcGocxAm4A2IHpmoWE0eBH+ezmFlNvU06shJ3W6VEelWMUQAIIF9f6qZpimsA1LYtS2uF51/u27YVAFZVRUkEoGHdPV/sIcbIEIIkUdI/9Xa7neyv61+SWFUVAVCSct00TWn2fv6u3+Ecfd3tXzy/0+nEUu+SPjo/kqzrmiQpScN6v98XewfA8/lMkiLJ2WxGSUopcT6fM6U0NX9/frfbjev1WtfrlZfLhYfDQQHG/AIOlnGwjINlHCxjHCzjYJm/TJWdCwquJXseFFzGwDNNeiKMOJTO8xQdDQaeB29+K9efeLaBo9J7vdvtJj1RjFFjfiv7qv95tjx/7leSQgh93e1ffMeIp6O+YQjho/N791t1XVOSSI7N//K+4/GoxWLBx+PB5/Op5XLJ+/3OlJJWqxU3m83ovv5iGf8KjYNlHCxjHCzjYBkHy5gf5gusvQU7U37jTAAAAABJRU5ErkJggg==');
  }
  .selected-color {
    width: var(
      --sky-override-colorpicker-selected-color-size,
      calc(calc(var(--sky-font-size-body-m) * 2) + var(--sky-space-gap-form-s))
    );
    height: var(
      --sky-override-colorpicker-selected-color-size,
      calc(calc(var(--sky-font-size-body-m) * 2) + var(--sky-space-gap-form-s))
    );
    top: var(--sky-override-colorpicker-selected-color-top, 0);
    left: var(--sky-override-colorpicker-selected-color-left, 0);
    position: absolute;
  }
  .selected-color-background {
    width: var(
      --sky-override-colorpicker-selected-color-size,
      calc(calc(var(--sky-font-size-body-m) * 2) + var(--sky-space-gap-form-s))
    );
    height: var(
      --sky-override-colorpicker-selected-color-size,
      calc(calc(var(--sky-font-size-body-m) * 2) + var(--sky-space-gap-form-s))
    );

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAh0lEQVRYR+2W0QlAMQgD60zdfwOdqa8TmI/wQMr5K0I5bZLIzLOa2nt37VVVbd+dDx5obgCC3KBLwJ2ff4PnVidkf+ucIhw80HQaCLo3DMH3CRK3iFsmAWVl6hPNDwt8EvNE5q+YuEXcMgkonVM6SdyCoEvAnZ8v1Hjx817MilmxSUB5rdLJDycZgUAZUch/AAAAAElFTkSuQmCC');
  }
  .rgba-text {
    width: 100%;
    font-size: var(--sky-override-colorpicker-rgba-font-size);
    padding: var(
      --sky-override-colorpicker-rgba-padding,
      var(--sky-space-inset-pillarbox-2_3-top-m)
        var(--sky-space-inset-pillarbox-2_3-right-m)
        var(--sky-space-inset-pillarbox-2_3-bottom-m)
        var(--sky-space-inset-pillarbox-2_3-left-m)
    );
    display: flex;
    input {
      min-width: 0;
      padding: var(--sky-override-colorpicker-input-padding);
    }
    label {
      margin: var(--sky-override-colorpicker-input-label-margin);
    }
    sky-input-box {
      flex: 1;
      margin: 0
        var(
          --sky-override-colorpicker-rgba-space-between,
          var(--sky-space-gap-form-s)
        )
        0 0;
    }

    & > sky-input-box {
      flex: 2;
    }
    & > fieldset {
      display: flex;
      flex: 4;
    }
    sky-input-box:last-child {
      margin: 0;
    }
  }
}

.sky-colorpicker-checkered-background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: var(
    --sky-override-colorpicker-button-size,
    calc(
      calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m)) +
        calc(var(--sky-space-inset-balanced-s) * 2)
    )
  );
  width: var(
    --sky-override-colorpicker-button-size,
    calc(
      calc(var(--sky-font-line_height-body-m) * var(--sky-font-size-body-m)) +
        calc(var(--sky-space-inset-balanced-s) * 2)
    )
  );
  background:
    -webkit-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.0980392) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.0980392) 75%,
      rgba(0, 0, 0, 0.0980392) 0
    ),
    -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent
          75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0),
    white;
  background:
    -moz-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.0980392) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.0980392) 75%,
      rgba(0, 0, 0, 0.0980392) 0
    ),
    -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.0980392) 25%, transparent 25%, transparent
          75%, rgba(0, 0, 0, 0.0980392) 75%, rgba(0, 0, 0, 0.0980392) 0),
    white;
  background: linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.0980392) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.0980392) 75%,
      rgba(0, 0, 0, 0.0980392) 0
    ),
    linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.0980392) 25%,
      transparent 25%,
      transparent 75%,
      rgba(0, 0, 0, 0.0980392) 75%,
      rgba(0, 0, 0, 0.0980392) 0
    ),
    white;
  background-repeat: repeat, repeat;
  background-position:
    0px 0,
    5px 5px;
  -webkit-transform-origin: 0 0 0;
  transform-origin: 0 0 0;
  -webkit-background-origin: padding-box, padding-box;
  background-origin: padding-box, padding-box;
  -webkit-background-clip: border-box, border-box;
  background-clip: border-box, border-box;
  -webkit-background-size:
    10px 10px,
    10px 10px;
  background-size:
    10px 10px,
    10px 10px;
  -webkit-box-shadow: none;
  border-radius: var(
    --sky-override-colorpicker-button-border-radius,
    var(--sky-border-radius-s)
  );
  box-shadow: none;
  text-shadow: none;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
  -webkit-transform: scaleX(1) scaleY(1) scaleZ(1);
  transform: scaleX(1) scaleY(1) scaleZ(1);
}

.sky-color-picker-label-wrapper {
  .sky-control-label {
    color: var(
      --sky-override-colorpicker-label-color,
      var(--sky-color-text-deemphasized)
    );
    margin-bottom: var(
      --sky-override-colorpicker-label-space,
      var(--sky-space-gap-form-xs)
    );
    font-size: var(
      --sky-override-colorpicker-label-font-size,
      var(--sky-font-size-input-label)
    );
    font-style: var(--sky-font-style-input-label);
    font-weight: var(
      --sky-override-colorpicker-label-font-weight,
      var(--sky-font-weight-input-label)
    );
    letter-spacing: var(--sky-font-letter_spacing-input-label);
    line-height: var(
      --sky-override-colorpicker-label-line-height,
      var(--sky-font-line_height-input-label)
    );
  }
}

.sky-theme-modern {
  .sky-colorpicker-button.sky-colorpicker-button-disabled {
    background-color: var(--sky-color-background-input-disabled) !important;

    .sky-colorpicker-button-modern-chevron {
      background-color: var(--sky-color-background-input-disabled);
      border-left: 1px solid var(--sky-color-border-action-secondary-disabled);
      border-top: 1px solid var(--sky-color-border-action-secondary-disabled);
    }

    .sky-colorpicker-button-icon {
      color: var(--sky-color-text-deemphasized) !important;
    }
  }

  .rgba-text {
    flex-wrap: wrap;

    & > sky-input-box:first-child {
      width: 100%;
      flex: 0 1 auto;
      margin: 0 0 var(--sky-space-gap-form-s) 0;
    }
  }

  .sky-colorpicker-preset-color-area {
    .sky-btn:nth-child(5n) {
      margin: 0 0 var(--sky-space-gap-form-m) 0;
    }
  }
}
