@use "../commons/mixins";

.card {
  display: block;
  background: var(--control-color);
  border-radius: var(--border-radius-default);
  //overflow: hidden;
  transition: box-shadow 0.3s ease-in-out;
  @include mixins.elevation(2);
  animation: sd-card var(--animation-duration) ease-out;
  opacity: 0;
  transform: translateY(-1em);
  animation-fill-mode: forwards;

  &:hover,
  &:focus-within {
    @include mixins.elevation(4);
  }
}

@keyframes sd-card {
  from {
    opacity: 0;
    transform: translateY(-1em);
  }
  to {
    opacity: 1;
    transform: none;
  }
}