@use "../colors" as c

.c-chat-banner
  position: sticky
  z-index: 1
  top: 0
  left: 0
  right: 0
  margin-right: 12px
  outline-color: #000
  opacity: 0
  transform: translateY(-40px)
  transition: transform 0.2s ease, opacity 0.2s ease-out

  &--active
    opacity: 1
    transform: translateY(0px)

  &__inner
    display: grid
    grid-template-columns: 1fr auto
    background: c.$notify-highlight
    color: #000
    margin: 0px 12px
    padding: 0px 12px
    border-radius: 0px 0px 10px 10px
    line-height: 1
    box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.1)
    cursor: pointer

    &:hover
      box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.6)

  &__part
    padding: 6px 0px 8px

    &:hover
      text-decoration: underline

  &__part-inner
    display: block
    width: 100% // yes, really.
    text-align: left

  &__last
    margin-left: 8px

  &__last &__part-inner
    border-left: 1px solid #222
    padding-left: 8px