@import "./_variables"

.post
    display: flex
    padding-top: .3rem
    padding-bottom: .3rem
    align-items: center
    transition: all .2s
    background: $background-dark-buttons
    color: $text-dark-buttons
    &[data-theme="light"]
        background: $background-light-buttons
        color: $text-light-buttons

.post:hover
    transform: translateY(-0.3em)
    background: $background-dark-buttons-hover
    color: $text-dark-buttons-hover
    &[data-theme="light"]
        background: $background-light-buttons-hover
        color: $text-light-buttons-hover
    > .tag
        color: $tag-text-dark-hover
        &[data-theme="light"]
            color: $tag-text-light-hover

.icon
    padding: 10px

.tag
    padding-right: 2rem
    margin-left: auto
    color: $tag-text-dark
    &[data-theme="light"]
        color: $tag-text-light

.title_date
    line-height: .5rem
    padding-left: 1rem
    .title
        font-weight: lighter
    .date
        color: $username-dark
        &[data-theme="light"]
            color: $username-light

.grid
    display: grid
    gap: .5rem
    grid-template-columns: 1

.link
    cursor: pointer