noydb/oworms-ui

@use '../../../style/colour' as colour;
@use '../../../style/font' as font;
@use '../../../style/mixin' as mxn;

div:first-child {
    width: 230px;
    min-height: 200px;
    max-height: 200px;
    overflow-y: scroll;
    padding: 1rem;
    margin: .5rem;
    box-shadow: 0 2px 4px -5px #101010;
    @include mxn.transition;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    color: #ffffff;
    border-radius: 4px;
    background-color: transparent;

    > span {
        display: block;
    }

    > span#pronunciation {
        font-size: .65rem;
        color: #907f7f;
    }

    h5.mono {
        font-family: 'roboto-mono-medium', font.$default-font;
        white-space: nowrap;
        overflow: hidden;
    }

    span#part-of-speech {
        font-size: 13px;
        color: colour.$secondary;
        margin-top: .5rem;
    }

    span#definition {
        font-size: 12px;
        padding-top: .5rem;
        padding-bottom: 1rem;
    }

    &:hover {
        background-color: rgba(161, 161, 161, 0.06);
    }

    > div {
        display: flex;
        justify-content: space-between;

        &:first-of-type {
            margin-top: 2.5rem;
        }

        > span {
            font-size: .6rem;
            color: #907f7f;
        }

        // date
        &:last-of-type {
            margin-top: .2rem;
            justify-content: flex-end;
        }
    }
}

@media screen and (min-width: 700px) {
    div:first-child {
        width: 285px;
    }
}