@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;
        }
    }
}
