@use "sass:map";
@use "sass:list";
@use "./functions.scss" as *;

.custom-upload {
  display: flex;
  &:has(.preview_image_container) {
    justify-content: space-between;
  }
  align-items: center;
  border: 1px solid var(--_gray-300);
  background-color: var(--_base-white);
  padding: 16px;
  border-radius: 4px;
  gap: 12px;
  .preview_image_container {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    .image_title {
      font-size: 14px;
      margin-top: 3px;
      .label {
        color: var(--_thm-cs-at-sy);
        @include restrictToLinesShow(1);
      }
    }
    .preview_image {
      height: 36px;
      width: 36px;
      border-radius: 50%;
      padding: 4px;
      background: var(--_base-white);
      border: 1px solid var(--_gray-300);
      img {
        width: 100%;
        width: 100%;
        object-fit: contain;
      }
    }
  }
  .clear_upload_icon {
    svg {
      width: 18px;
      height: 18px;
    }
  }
  .uploadicon {
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--_gray-200);
    outline: 6px solid var(--_gray-100);
    border-radius: 50%;
    height: 36px;
    width: 36px;
    .svg_icon {
      svg {
        width: 20px;
        height: 20px;
        path {
          stroke: var(--_gray-700);
        }
      }
    }
  }

  .file_upload_text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    .label {
      @include restrictToLinesShow(1);
    }
    p {
      color: var(--_thm-cs-at-py);
      font-weight: 600;
    }
    span {
      color: var(--_thm-cs-at-sy);
      font-size: 14px;
    }
  }
}

// Skeleton for the reused ProductOptions swatches (rendered inside the CMS
// builder/preview, e.g. the Category Groups product cards). Mirrors the website
// globals so the swatch placeholders keep their spacing here too.
.product_options_skeleton {
  width: 100%;
  .sklts_swatch {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
  }
}

// Skeleton base styles (mirrored from storefront-websites globals so reused
// element skeletons render identically inside the CMS builder/preview).
.skeleton {
  background-color: #e5e7eb !important;
  border: none !important;
  min-height: 8px;
  position: relative;
  overflow: hidden;
  display: block;

  &--rectangular {
    width: 100%;
    height: 100%;
  }

  &--circular {
    border-radius: 50%;
  }

  &--text {
    transform-origin: 0 55%;
    transform: scale(1, 0.6);
    border-radius: 4px;

    &::before {
      content: "\00a0";
    }
  }

  &--shimmer {
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
      );
      animation: skeleton-shimmer 1.5s infinite;
      transform: translateX(-100%);
    }
  }

  &--pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
  }
}

@keyframes skeleton-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.skeleton__element {
  @extend .skeleton;
  @extend .skeleton--shimmer;
}

// Text Overflow fallback.
//
// Text Overflow is a `controls` property, not a CSS one, so it cannot travel to the
// stylesheet as a variable — the renderer opts a text node in with `.flex__overflow`
// and carries the line count in `--_sf-line-clamp`.
//
// This is the clamp declared once, for every text node whose own block does not set a
// competing `display`. Blocks that do (a flex label, say) carry their own scoped
// `&.flex__overflow` rule, since this one is a single class and would lose to them.
//
// The class is only ever emitted when the toggle is on, so this cannot clamp a node
// that was not asked to be clamped.
//
// Mirrored in storefront-cms-library/src/components/css/widgets/global-styles.scss —
// change one, copy it across.
.flex__overflow {
  // A clamp can only reach its second line if the text is allowed to wrap, so this
  // undoes any `white-space: nowrap` the node carries — the same thing the hand-written
  // clamps in allocations-quota-details.scss and friends do.
  white-space: normal;
  @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
}