.dimensions {
  width: 60rem;
  height: 40rem;
  border: var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.info {
  display: flex;
}

.data {
  width: 40rem;
  height: 15rem;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.data-row {
  display: flex;
  justify-content: space-between;
}

img {
  width: 15rem;
  height: 15rem;
  margin-left: 1rem;
}

.entry {
  width: 9rem;
  height: 6rem;
  // border: 1px solid rgba(0, 0, 0, 0.2);

  .name {
    // font-size: 1.125rem;
    font-weight: 500;
  }

  .value {
    display: flex;
  }
}

@mixin button {
  color: black;
  border: none;
  border-radius: 10px;
  box-shadow: var(--shadow);
  height: 4rem;
  width: 8rem;
  font-size: 1.125rem;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.full-spellcard {
  height: 42rem;
  width: 30rem;
  border: solid 1px var(--border-color);
  border-radius: 10px;
  box-shadow: var(--shadow);
  background: white;
  overflow: auto;
}

.delete-row {
  display: flex;
  justify-content: space-around;
  margin-top: 1rem;
}
.delete-button {
  background: var(--delete);
  @include button;
  &:hover {
    background: var(--delete-hover);
    scale: 1.03;
  }
}

.edit-button {
  background: var(--edit);
  @include button;
  &:hover {
    background: var(--edit-hover);
    scale: 1.03;
  }
}

.add-button {
  background: var(--accept);
  @include button;
  &:hover {
    background: var(--accept-hover);
    scale: 1.03;
  }

  &.disabled {
    filter: grayscale(50%);
    &:hover {
      scale: 1;
      background: var(--accept);
      cursor: default;
    }
  }
}
