spaCy/website/assets/css/_components/_chat.sass

//- 💫 CSS > COMPONENTS > CHAT

.c-chat
    @include position(fixed, top, left, 0, 60%)
    bottom: 0
    right: 0
    display: flex
    flex-flow: column nowrap
    background: $color-back
    transition: transform 0.3s cubic-bezier(0.16, 0.22, 0.22, 1.7)
    box-shadow: -0.25rem 0 1rem 0 rgba($color-front, 0.25)
    z-index: 100

    @include breakpoint(min, md)
        left: calc(100% - #{$aside-width} - #{$aside-padding})

    @include breakpoint(max, sm)
        left: 50%

    @include breakpoint(max, xs)
        left: 0

    &.is-collapsed:not(.is-loading)
        transform: translateX(110%)

    &:before
        @include position(absolute, top, left, 1.25rem, 2rem)
        content: attr(data-title)
        font: bold 1.4rem $font-secondary
        text-transform: uppercase
        color: $color-back

    &:after
        @include position(absolute, top, left, 0, 100%)
        content: ""
        z-index: -1
        bottom: 0
        right: -100%
        background: $color-back

    & > iframe
        width: 100%
        flex: 1 1 calc(100% - #{$nav-height})
        border: 0

    .gitter-chat-embed-loading-wrapper
        @include position(absolute, top, left, 0, 0)
        right: 0
        bottom: 0
        display: none
        justify-content: center
        align-items: center

        .is-loading &
            display: flex

    .gitter-chat-embed-action-bar,
    .gitter-chat-embed-action-bar-item
        display: flex

    .gitter-chat-embed-action-bar
        align-items: center
        justify-content: flex-end
        background: $color-theme
        padding: 0 1rem 0 2rem
        flex: 0 0 $nav-height

    .gitter-chat-embed-action-bar-item
        @include size(40px)
        padding: 0
        opacity: 0.75
        background-position: 50%
        background-repeat: no-repeat
        background-size: 22px 22px
        border: 0
        cursor: pointer
        transition: all 0.2s ease

        &:focus,
        &:hover
            opacity: 1

        &.gitter-chat-embed-action-bar-item-pop-out
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTYgMmgtOC4wMjFjLTEuMDk5IDAtMS45NzkgMC44OC0xLjk3OSAxLjk4djguMDIwYzAgMS4xIDAuOSAyIDIgMmg4YzEuMSAwIDItMC45IDItMnYtOGMwLTEuMS0wLjktMi0yLTJ6TTE2IDEyaC04di04aDh2OHpNNCAxMGgtMnY2YzAgMS4xIDAuOSAyIDIgMmg2di0yaC02di02eiI+PC9wYXRoPjwvc3ZnPg==)
            margin-right: -4px

        &.gitter-chat-embed-action-bar-item-collapse-chat
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTguOTg0IDYuNDIybC01LjU3OCA1LjU3OCA1LjU3OCA1LjU3OC0xLjQwNiAxLjQwNi01LjU3OC01LjU3OC01LjU3OCA1LjU3OC0xLjQwNi0xLjQwNiA1LjU3OC01LjU3OC01LjU3OC01LjU3OCAxLjQwNi0xLjQwNiA1LjU3OCA1LjU3OCA1LjU3OC01LjU3OHoiPjwvcGF0aD48L3N2Zz4=)

.c-chat__button
    @include position(fixed, bottom, right, 1.5rem, 1.5rem)
    z-index: 5
    color: $color-back
    background: $color-front
    border-radius: 1em
    padding: 0.5rem 1.15rem 0.35rem
    opacity: 0.7
    transition: opacity 0.2s ease

    &:hover
        opacity: 1


.gitter-open-chat-button
    display: none