/* src/styles/mypage-collection.scss */
.mypage-collection-toy__label:has(.mypage-collection-toy__input:focus-visible) {
  outline: Highlight solid 2px;
  outline: -webkit-focus-ring-color solid 2px;
}
.mypage-collection-toy__input,
.mypage-collection-counter__current-alt,
.mypage-collection-counter__total-alt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
.mypage-collection-counter {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 8px;
  width: 84px;
  height: 84px;
  border: 2px solid var(--COLOR_SECONDARY);
  border-radius: 100vmax;
  margin-inline: auto;
  background-color: var(--COLOR_PRIMARY);
  color: var(--COLOR_BASE);
  line-height: 1;
  font-weight: var(--FONT_WEIGHT_BOLD);
}
.mypage-collection-counter::before {
  content: "";
  position: absolute;
  top: 58%;
  width: 40px;
  height: 1px;
  background-color: var(--COLOR_BASE);
}
.mypage-collection-counter__current-value {
  font-size: 3.2rem;
}
.mypage-collection-counter__total-value {
  font-size: 2rem;
}
.mypage-collection-tabs__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  max-width: 335px;
  margin-inline: auto;
  padding: 5px;
  border-radius: 100vmax;
  background-color: var(--COLOR_BACKGROUND);
}
.mypage-collection-tabs__tab {
  flex: 1;
  border-radius: 100vmax;
  padding: 8px 15px;
  background-color: var(--COLOR_BACKGROUND);
  color: var(--COLOR_PRIMARY);
}
.mypage-collection-tabs__tab[aria-selected=true] {
  background-color: var(--COLOR_PRIMARY);
  color: var(--COLOR_BASE);
}
.mypage-collection-tabs__content {
  margin-top: 50px;
}
.mypage-collection-toy {
  margin-top: var(--SPACING);
  padding: 20px;
}
.mypage-collection-toy__heading {
  position: relative;
  max-width: 600px;
  border-radius: 5px;
  border: 2px solid #B67B3F;
  margin-inline: auto;
  padding: 10px;
  background-color: #E2AE7A;
  color: var(--COLOR_BASE);
  text-align: center;
  text-shadow: 1px 1px 0 #C78E55;
}
.mypage-collection-toy__heading::before,
.mypage-collection-toy__heading::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 100vmax;
  background-color: #B67B3F;
  filter: drop-shadow(1px 1px 0 #C78E55);
}
.mypage-collection-toy__heading::before {
  left: 10px;
}
.mypage-collection-toy__heading::after {
  right: 10px;
}
.mypage-collection-toy__list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--SPACING);
}
.mypage-collection-toy__item {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 100vmax;
}
.mypage-collection-toy__label {
  display: block;
  width: 100%;
  height: 100%;
}
.mypage-collection-toy__content:where(button) {
  width: 100%;
  height: 100%;
  transition: opacity var(--TRANSITION);
}
@media (hover: hover) and (width >= 768px) {
  .mypage-collection-toy__content:where(button):hover {
    opacity: 0.5;
  }
}
.mypage-collection-toy__number {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 100vmax;
  background-color: var(--COLOR_BACKGROUND);
  color: var(--COLOR_BASE);
  font-size: 3.2rem;
  font-weight: var(--FONT_WEIGHT_BOLD);
  z-index: var(--Z_INDEX_BEHIND);
}
.mypage-collection-toy__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 2px solid var(--COLOR_SECONDARY);
  border-radius: 100vmax;
  padding: 12px;
  background-color: var(--COLOR_BASE);
  pointer-events: none;
}