.animationItems {
  display: flex;
  flex-direction: column;
  gap: var(--body-default-margin);

  .itemCard {
    .info {
      flex-shrink: 0;
    }

    .spacer {
      flex: 1;
    }

    .preview {
      box-sizing: border-box;
      height: 2.75rem;
      border: solid 1px var(--col-background-tint-2);
      canvas {
        max-width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    button.edit {
      height: 2.75rem;
      aspect-ratio: 1;

      .icon {
        width: 1.25rem;
        height: 1.25rem;
      }
    }
  }
}

button.deleteAnimation,
button.deleteAnimation:hover,
button.deleteFrame,
button.deleteFrame:hover {
  display: flex;
  align-items: center;
  margin-inline: auto;
  margin-top: 2rem;
  padding-inline: 3rem;
  height: 2.5rem;
  color: var(--col-background);
  background-color: var(--col-danger);
  font-weight: bold;
  font-size: 1rem;
}

.animationView {
  position: absolute;
  inset: 0;
  padding: 15vmin;
  background-color: var(--col-foreground);
  background-size: 16px 16px;
  canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.exportPreview {
  canvas {
    width: 100%;
    object-fit: contain;
  }
}