// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC Sucursal en España SL

@use "ds/typography.scss" as t;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;

.colorpicker-tooltip {
  --colorpicker-width: #{$sz-284};

  position: absolute;
  display: flex;
  flex-direction: column;
  inset-inline-start: calc(10 * px2rem(140));
  inline-size: var(--colorpicker-width);
  padding: var(--sp-m);
  border-radius: $br-8;
  box-shadow: 0 0 12px 0 var(--color-shadow-dark);
  color: var(--color-foreground-primary);
  background-color: var(--color-background-primary);
  z-index: var(--z-index-set);
  overflow: auto;
}

.colorpicker {
  border-radius: $br-8;
  overflow: hidden;
}

.top-actions {
  display: flex;
  align-items: flex-start;
  flex-direction: row-reverse;
  justify-content: space-between;
  block-size: $sz-40;
}

.top-actions-right {
  display: flex;
  gap: var(--sp-s);
}

.actions {
  display: flex;
  gap: var(--sp-xs);
}

.accept-color {
  justify-content: center;
  inline-size: 100%;
}

.picker-detail-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-block: var(--sp-m) var(--sp-s);
  margin-inline: 0;
}

.center-circle {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: var(--sp-xxl);
  block-size: var(--sp-xxl);
  border: $b-2 solid var(--color-background-quaternary);
  border-radius: $br-circle;
  transform: translate(calc(-1 * var(--sp-m)), calc(-1 * var(--sp-m)));
}

.picker-detail {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.select {
  inline-size: px2rem(116);
}

.select-image {
  margin-block-start: var(--sp-xs);
}

.content {
  display: flex;
  justify-content: center;
  border-radius: $br-8;
  block-size: px2rem(140);
  margin-block-end: px2rem(6);
  margin-inline-end: px2rem(1);
  background-image: url("/images/colorpicker-no-image.png");
  background-position: center;
  background-size: auto px2rem(140);
}

.content-image {
  max-inline-size: 100%;
  max-block-size: 100%;
  inline-size: fit-content;
  block-size: fit-content;
  margin: auto;
}

.choose-image {
  justify-content: center;
  inline-size: 100%;
}

// TODO: Use a DS checkbox component
.checkbox-option {
  display: flex;
  align-items: center;
  margin-block: var(--sp-l) 0;
  margin-inline: 0;

  // The native checkbox markup (label, span, input, svg) has no dedicated
  // classes; styling these elements directly is unavoidable.
  label {
    @include t.use-typography("body-small");

    display: flex;
    align-items: center;
    gap: px2rem(6);
    cursor: pointer;
    color: var(--color-foreground-secondary);

    span {
      --checkbox-icon-background-color: var(--color-background-quaternary);
      --checkbox-icon-border-color: var(--color-foreground-secondary);
      --checkbox-icon-foreground-color: var(--color-background-primary);

      display: flex;
      justify-content: center;
      align-items: center;
      inline-size: $sz-16;
      block-size: $sz-16;
      min-inline-size: $sz-16;
      min-block-size: $sz-16;
      border-radius: $br-4;
      background-color: var(--checkbox-icon-background-color);
      border: $b-1 solid var(--checkbox-icon-border-color);

      svg {
        display: none;
        inline-size: $sz-16;
        block-size: $sz-16;
        stroke: var(--checkbox-icon-foreground-color);
      }

      &:hover {
        --checkbox-icon-border-color: var(--color-accent-primary-muted);
      }

      &:focus {
        --checkbox-icon-border-color: var(--color-accent-primary);
      }

      &:global(.checked) {
        --checkbox-icon-background-color: var(--color-accent-primary);
        --checkbox-icon-border-color: var(--color-background-quaternary);

        svg {
          display: flex;
          justify-content: center;
          align-items: center;
          inline-size: $sz-12;
          block-size: $sz-12;
          stroke-width: 1.33px;
        }
      }

      &:global(.intermediate) {
        --checkbox-icon-background-color: var(--color-foreground-secondary);
        --checkbox-icon-foreground-color: var(--color-background-secondary);

        svg {
          display: flex;
          justify-content: center;
          align-items: center;
          inline-size: $sz-12;
          block-size: $sz-12;
          stroke-width: 1.33px;
        }
      }

      &:global(.unchecked) {
        --checkbox-icon-border-color: var(--color-background-quaternary);
      }
    }

    input {
      margin: 0;
    }

    &:hover {
      span {
        --checkbox-icon-border-color: var(--color-accent-primary-muted);
      }
    }

    &:focus,
    &:focus-within {
      span {
        --checkbox-icon-border-color: var(--color-accent-primary);
      }
    }
  }
}

.token-color-title {
  @include t.use-typography("title-small");

  color: var(--color-foreground-secondary);
  display: flex;
  align-items: center;
  block-size: var(--sp-xxxl);
}