.sticker {
  z-index: -1;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 40px 1fr 40px 1fr 40px;
  grid-template-rows: 40px 1fr 40px;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.1));
}
.sticker div {
  min-width: 0;
  min-height: 0;
}
.sticker svg {
  width: 100%;
  height: 100%;;
}

.ornament {
  position: relative;
  width: var(--ornament-width, 180px);
  height: var(--ornament-height, 93px);
  filter: var(--blur);
  transform: translateZ(0);
}
.ornament-leaves, .ornament-eggs, .ornament-egg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ornament-eggs, .ornament-egg-back {
  backface-visibility: hidden;
  transform-origin: center;
  transform-style: preserve-3d;
}
.ornament-egg-back {
  transform: rotateY(180deg);
}

@keyframes pulse {
  from {
    background-color: var(--grey-02);
  }
  to {
    background-color: var(--grey-01);
  }
}

:is(.icon-button, .icon-panel) {
  width: 100%;
  justify-self: stretch;
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  align-items: start;
  margin-block-end: 3px;
  padding-inline: 3px;
  background-color: var(--grey-01);
  border-top: var(--border);
  border-bottom: var(--border);
  transition: background 500ms ease-out;
}
:is(.icon-button, .icon-panel) > * {
  margin-block-start: 5px;
}
:is(.icon-button, .icon-panel) .icon {
  margin-block: 30px;
  transform: translate3d(0px, 0px, 0px); /* Safari fix */
}
:is(.icon-button, .icon-panel) > :first-child {
  justify-self: start;
  color: var(--grey-02);
  transition: color 500ms ease-out;
}
.icon-panel > :first-child {
  color: var(--dark-01);
}
:is(.icon-button, .icon-panel) > :last-child {
  justify-self: end;
}
.icon-button:not(:disabled):hover {
  background-color: var(--grey-02);
}
.icon-button:not(:disabled):hover > p:first-child {
  color: var(--dark-01);
}
ajax-form[submitting] .icon-button {
  animation: pulse 1000ms ease-out infinite alternate;
}

.icon {
  display: grid;
}
.icon, .icon svg {
  width: 1.375rem;
  height: 1.875rem;
}
.icon > * {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  align-self: end;
  justify-self: center;
}
.icon span {
  padding: 0.25rem 0 0.125rem;
}
.icon-inactive {
  opacity: 0.25;
}

.button {
  padding-block: 10px;
  border-top: var(--border);
  border-bottom: var(--border);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  background-color: var(--grey-02);
  transition: background 500ms ease-out;
}
.button:is(a[href], button:not(:disabled)):hover {
  background-color: var(--grey-01);
}

.border {
  width: 100%;
  height: 1px;
}