/* customSkuInputOptionComponent.css */

.customFieldInputOptions {
  --cpf-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cpf-duration: 0.45s;
  --cpf-icon-size: 2.75em;
  --cpf-gap: 0.625em;
  width: 100%;
  display: grid;
  gap: var(--cpf-gap);
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(var(--cpf-icon-size), auto);
  position: relative;
  transition: grid-template-columns var(--cpf-duration) var(--cpf-ease);
}

.customFieldInputOptions:has(> .customFieldInputFonts):has(> .customFieldInputEmoji):not(:has(.expanded)) {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(var(--cpf-icon-size), auto);
}

.customFieldInputOptions:has(> :only-child) {
  grid-template-columns: 1fr;
}

.customFieldInputOptions:has(.customFieldInputFonts.expanded) {
  grid-template-columns: 9fr 1fr;
  grid-template-rows: minmax(6rem, auto);
}

.customFieldInputOptions:has(.customFieldInputEmoji.expanded) {
  grid-template-columns: 1fr 9fr;
  grid-template-rows: minmax(6rem, auto);
}

.customFieldInputFonts,
.customFieldInputEmoji {
  --panel-bg: #fffcee;
  --panel-bg-hover: #fff6d6;
  --panel-ring: rgba(245, 197, 66, 0.35);
  --panel-height: var(--cpf-icon-size);
  --panel-width: 100%;
  --panel-padding: 0.375em;
  min-width: 0;
  width: var(--panel-width);
  min-height: var(--panel-height);
  max-height: var(--panel-height);
  border-radius: 0.625em;
  border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: var(--custom-field-box-shadow);
  background-color: var(--panel-bg);
  overflow: hidden;
  justify-self: stretch;
  align-self: stretch;
  display: grid;
  gap: 0.375em;
  padding: var(--panel-padding);
  transition:
    width var(--cpf-duration) var(--cpf-ease),
    min-height var(--cpf-duration) var(--cpf-ease),
    max-height var(--cpf-duration) var(--cpf-ease),
    height var(--cpf-duration) var(--cpf-ease),
    padding var(--cpf-duration) var(--cpf-ease),
    gap var(--cpf-duration) var(--cpf-ease),
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    grid-template-columns var(--cpf-duration) var(--cpf-ease),
    grid-template-rows var(--cpf-duration) var(--cpf-ease);
}

.customFieldInputEmoji {
  --panel-bg: #eef6ff;
  --panel-bg-hover: #dceeff;
  --panel-ring: rgba(40, 127, 220, 0.28);
}

.customFieldInputFonts:not(.expanded),
.customFieldInputEmoji:not(.expanded) {
  display: inline-grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  place-content: center;
  place-items: center;
  --panel-height: var(--cpf-icon-size);
  --panel-width: 100%;
  max-height: var(--cpf-icon-size);
}

.customFieldInputOptions:has(.customFieldInputFonts.expanded) .customFieldInputEmoji:not(.expanded),
.customFieldInputOptions:has(.customFieldInputEmoji.expanded) .customFieldInputFonts:not(.expanded) {
  --panel-padding: 0.25em;
  --panel-width: 100%;
}

.customFieldInputFonts.expanded,
.customFieldInputEmoji.expanded {
  --panel-height: auto;
  --panel-width: 100%;
  --panel-padding: 0.75em;
  min-height: 6rem;
  max-height: 40rem;
  height: auto;
  background-color: #fff;
  border-color: rgba(0, 0, 0, 0.08);
  gap: 0.5em;
  box-shadow:
    var(--custom-field-detail-box-shadow),
    0 4px 16px rgba(0, 0, 0, 0.07);
}

.customFieldInputFonts:hover:not(.expanded),
.customFieldInputEmoji:hover:not(.expanded) {
  background-color: var(--panel-bg-hover);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow:
    var(--custom-field-box-shadow),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

.customFieldInputFonts {
  --cpf-select-color: #287fdc;
  --cpf-select-ring: rgba(40, 127, 220, 0.18);
  --cpf-select-bg: rgba(40, 127, 220, 0.07);
  --cpf-select-glow: rgba(40, 127, 220, 0.12);
}

.customFieldInputFonts.expanded {
  grid-template-columns: repeat(3, minmax(3.75rem, 1fr));
  grid-auto-rows: minmax(2rem, auto);
  place-content: start;
}

.customFieldInputEmoji.expanded {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(2.25rem, auto);
  place-content: start;
}

.customInputOptionIcon {
  position: relative;
  display: inline-flex;
  inline-size: 1.5em;
  block-size: 1.5em;
  justify-content: center;
  align-items: center;
  line-height: 0;
  vertical-align: middle;
  transition:
    inline-size var(--cpf-duration) var(--cpf-ease),
    block-size var(--cpf-duration) var(--cpf-ease),
    width var(--cpf-duration) var(--cpf-ease),
    height var(--cpf-duration) var(--cpf-ease),
    transform 0.3s var(--cpf-ease),
    opacity 0.25s ease;
}

.customFieldInputFonts:not(.expanded) .customInputOptionIcon,
.customFieldInputEmoji:not(.expanded) .customInputOptionIcon {
  inline-size: 1.5em;
  block-size: 1.5em;
}

.customFieldInputFonts:not(.expanded):active .customInputOptionIcon,
.customFieldInputEmoji:not(.expanded):active .customInputOptionIcon {
  transform: scale(0.92);
}

.customFieldInputFonts > .customInputOptionIcon:first-child::after {
  position: absolute;
    right: -.5em;
    top: 0;
  content: " *";
  color: #e53935;
  margin-left: 0.25em;
  font-size: 0.875em;
  line-height: 1;
}

.customFontImgs,
.customEmojiImgs {
  border-radius: 0.375em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--custom-field-detail-box-shadow);
  transition:
    transform 0.22s var(--cpf-ease),
    box-shadow 0.28s var(--cpf-ease),
    border-color 0.28s var(--cpf-ease),
    background-color 0.28s var(--cpf-ease),
    width var(--cpf-duration) var(--cpf-ease),
    height var(--cpf-duration) var(--cpf-ease);
  animation: cpfOptionReveal 0.38s var(--cpf-ease) backwards;
}

.customFieldInputFonts.expanded > .customFontImgs:nth-child(1),
.customFieldInputEmoji.expanded > .customEmojiImgs:nth-child(1) { animation-delay: 0.02s; }
.customFieldInputFonts.expanded > .customFontImgs:nth-child(2),
.customFieldInputEmoji.expanded > .customEmojiImgs:nth-child(2) { animation-delay: 0.04s; }
.customFieldInputFonts.expanded > .customFontImgs:nth-child(3),
.customFieldInputEmoji.expanded > .customEmojiImgs:nth-child(3) { animation-delay: 0.06s; }
.customFieldInputFonts.expanded > .customFontImgs:nth-child(4),
.customFieldInputEmoji.expanded > .customEmojiImgs:nth-child(4) { animation-delay: 0.08s; }
.customFieldInputFonts.expanded > .customFontImgs:nth-child(5),
.customFieldInputEmoji.expanded > .customEmojiImgs:nth-child(5) { animation-delay: 0.1s; }
.customFieldInputFonts.expanded > .customFontImgs:nth-child(6),
.customFieldInputEmoji.expanded > .customEmojiImgs:nth-child(6) { animation-delay: 0.12s; }
.customFieldInputFonts.expanded > .customFontImgs:nth-child(7),
.customFieldInputEmoji.expanded > .customEmojiImgs:nth-child(7) { animation-delay: 0.14s; }

@keyframes cpfOptionReveal {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.customFontImgs {
  aspect-ratio: 3 / 1;
  width: 100%;
  background: #fafafa;
  border: 1.5px solid transparent;
}

.customEmojiImgs {
  aspect-ratio: 1 / 1;
  font-size: 1.25em;
  background: #f8fbff;
}

.customFontImgs:hover:not(.selectedFontDiv),
.customEmojiImgs:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    var(--custom-field-detail-box-shadow),
    0 3px 10px rgba(0, 0, 0, 0.08);
}

.customFontImgs:active:not(.selectedFontDiv),
.customEmojiImgs:active {
  transform: scale(0.98);
}

.customFontImgs > img,
.customEmojiImgs > img {
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.customFontImgs.selectedFontDiv {
  border-color: var(--cpf-select-color);
  background: linear-gradient(
    160deg,
    var(--cpf-select-bg) 0%,
    #fff 55%,
    #fafcff 100%
  );
  box-shadow:
    0 0 0 3px var(--cpf-select-ring),
    0 6px 16px var(--cpf-select-glow),
    var(--custom-field-detail-box-shadow);
  transform: translateY(-2px);
}

.customFontImgs.selectedFontDiv:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 3px rgba(40, 127, 220, 0.24),
    0 8px 20px rgba(40, 127, 220, 0.16),
    var(--custom-field-detail-box-shadow);
}

.customFontImgs.selectedFontDiv:active {
  transform: translateY(-1px) scale(0.99);
}

@media (prefers-reduced-motion: reduce) {
  .customFieldInputOptions,
  .customFieldInputFonts,
  .customFieldInputEmoji,
  .customInputOptionIcon,
  .customFontImgs,
  .customEmojiImgs {
    transition: none;
    animation: none;
  }
}