/* spell */
.spell {
    height: var(--sph);
    background-color: var(--elm);
    border: var(--ol) 3px solid;
    border-radius: 0.6rem;
    padding: .5rem;
    margin: .5rem;
    overflow: hidden;
    transition: height .3s;
}

.spell_closed {
    height: var(--sph);
}

.spell_head {
    display: flex;
    height: var(--sph);
}

.spell_title {
    color: var(--text);
    font-size: var(--tlrg);
    margin: 0px;
    height: fit-content;
    margin-top: -0.109375rem;
}

/* spell divisions */
.name {
    width: calc(30% - 6rem - 4.5%);
    margin-left: .5rem;
}
.open_name {
    width: calc(100% - 18rem - 1%);
    margin-left: .5rem;
}

.level {
    width: 1rem;
    text-align: center;
    margin-left: 3%;
    margin-right: 3%;
}

.classes {
    width: calc(70% - 6rem - 4.5%);
}

div.quick {
    width: 9rem;
    margin-left: 2%;
}
div.full {
    width: 16rem;
}
div.add {
    text-align: center;
    height: 2.5rem;
    margin-top: -.5rem;
    position: relative;
    z-index: 1;
}
p.add {
    white-space: nowrap;
    overflow: hidden;
    margin-top: .45rem;
    border-bottom: 3px solid var(--ol);
}
p.quick_add {
    white-space: nowrap;
    overflow: hidden;
    margin-top: .45rem;
}

.arrow {
    position: relative;
    left: 1%;
    margin-right: 1.5%;
    text-align: right;
    transition: transform .2s;
}
.spell_arrow {
    position: unset;
    width: 1rem;
    margin-right: 0;
    margin-left: 1%;
}
.arrow.open {
    transform: deg(-90);
}
/* end spell divisions */

/* spell body */
.spell_text {
    font-size: var(--tmed);
    color: var(--text);
    margin: 1rem 2rem;
    line-height: 1.6rem;
}

/* spacing between title and body */
.spell_top_spacer {}
.spell_bottom_spacer {}

table_header {
    position: relative;
    top: 1rem;
    font-weight: bold;
}

.spell_table {
    margin-left: 4rem;
    border-collapse: collapse;
}

/* every other table row */
tr:nth-child(odd) {
    background-color: #3C3C3C;
}

/* table top row/others */
th, td {
    color: var(--text);
    font-size: var(--tmid);
    padding: .25rem .5rem;
    min-width: 2.25rem;
}

/* top table row */
th {
    font-weight: bold;
    text-align: left;
}
/* end spell body */

/* toggle spell button */
.toggle_button_top {
    position: relative;
    height: calc(var(--sph) + 1rem);
    margin: -0.5rem;
    margin-top: -2rem;
}

.toggle_button_bottom {
    position: relative;
    height: 2.5rem;
    margin: -2rem -0.5rem -.5rem;
}
/* end toggle spell button */

/* end spell */

/* small screen styles */
@media (min-height: 1280px) {
    /* spell styles */
    .spell {
        height: calc(.5rem + var(--sph));
        border-width: 5px;
        padding: .75rem 1rem;
        border-radius: 1rem;
    }

    .spell_text {
        line-height: 3rem;
        margin: .5rem 2rem 0rem;
    }

    /* spell buttons */
    .toggle_button_top, .toggle_button_bottom {
        height: calc(var(--sph) + 2rem);
        margin-top: -2.5rem;
    }
    .toggle_button_bottom {
        margin-top: -3.2rem;
        margin-bottom: -0.75rem;
    }
    /* end spell buttons */

    /* spell header */
    .name {
        width: calc(42% - 7rem - 3%);
    }
    .open_name {
        width: calc(100% - 24rem);
    }

    .level {
        width: 2rem;
        margin: 0 2%;
    }

    .classes {
        width: calc(58% - 9rem - 3%);
    }

    div.quick {
        width: 14rem;
        margin-left: 2%;
    }
    div.full {
        width: 24rem;
    }
    div.add {
        margin-top: -.8rem;
        height: 3.8rem;
    }
    p.quick_add {
        margin-top: .6rem;
    }

    .arrow {
        left: 0%;
    }
    .spell_arrow {
        display: none;
    }
    /* spell header */

    /* spell spacers */
    .spell_top_spacer {
        margin-top: 1rem;
    }
    .spell_bottom_spacer {
        height: 1rem;
    }
    /* spell spacers */
    /* end spell styles */
}