@import "./_variables"

.button
    display: flex
    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

.button: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
    // & > .platform_username > .username
    //     color: $username-dark-hover
    //     &[data-theme="light"]
    //         color: $username-light-hover
// TODO: FIX THE HOVER FOR USERNAMES
.icon
    padding: 10px

.link
    padding: 10px
    margin-left: auto

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

.grid
    display: grid
    gap: .5rem
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))