.tile {
  --unswept-border-width: 1px;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  font-weight: bold;
  text-shadow: none;
  height: 36px;
  width: 36px;
  flex-grow: 0;
  flex-shrink: 0;
  background-image: url("../../assets/images/bg-dark.png");
  border-radius: 4px;
  padding: 0;
  &.swept {
    background-image: url("../../assets/images/bg-light.png");
    box-shadow: none;
  }
  &.mine.swept {
    background-image: url("../../assets/images/bg-trigger.png");
  }
  &:not(.swept):hover,
  &.highlight {
    background-image: linear-gradient(#ffffff20, #ffffff20), url("../../assets/images/bg-dark.png");
  }
  > img {
    width: 26px;
    height: 26px;
  }
  > * {
    margin: 0;
    text-shadow: none;
  }
  &.is-1 {
    color: rgb(138, 88, 0);
  }
  &.is-2 {
    color: green;
  }
  &.is-3 {
    color: rgb(201, 0, 0);
  }
  &.is-4 {
    color: blue;
  }
  &.is-5 {
    color: purple;
  }
  &.is-6 {
    color: rgb(0, 131, 151);
  }
  &.is-7 {
    color: rgb(159, 0, 101);
  }
  &.is-8 {
    color: black;
  }
}

@keyframes plantFlag {
  from {
    transform: translate(4px, -35px) rotate(9deg);
    opacity: 0.5;
  }
  to {
    transform: translate(0px, 0px) rotate(0deg);
    opacity: 1;
  }
}

.flag {
  animation: plantFlag 0.07s ease-out;
}
