/* customSkuInputOptionComponent.css */

.customFieldInputOptions {
  width: 100%;
  height: fit-content;
  display: inline-flex;
  column-gap: 0.5em;
  position: relative;
}
.customFieldInputFonts,
.customFieldInputEmoji {
  min-height: 2em;
  border-radius: 0.5em;
  transition: 0.25s ease;
  cursor: pointer;
  display: grid;
  gap: 0.25em;
  padding: 0.25em;
  box-sizing: border-box;
  box-shadow: var(--custom-field-box-shadow);
}
.customInputOptionIcon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.customFieldInputFonts > .customInputOptionIcon:first-child::after {
        content: " *";
        color: red;
        margin-left: 5px;
}
.customFieldInputFonts {
  background: #fffcee;
  width: 20%;
  grid-template-rows: 1fr;
}
.customFieldInputEmoji {
  background: #eef6ff;
  width: 80%;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.customFieldInputFonts.expanded {
  width: 50%;
  grid-template-rows: 0fr 1fr;
  background-color: #fff;
}
.customFieldInputEmoji.expanded {
  width: 100%;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  background-color: #fff;
}
.customFontImgs,
.customEmojiImgs {
  border-radius: 0.25em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--custom-field-detail-box-shadow);
}
.customFontImgs {
  aspect-ratio: 3/1;
  width: 100%;
}
.customEmojiImgs {
  aspect-ratio: 1/1;
}
.customFontImgs > img,
.customEmojiImgs > img {
  object-fit: cover;
  object-position: center;
}