@import "util"
@import "sendercolor"
@import "mirccolor"

.results
  max-width: 1136px
  padding: 2rem 2rem 4rem 2rem
  margin: 0 auto

  transition: opacity 400ms

  @media(max-width: 800px)
    padding-left: 0
    padding-right: 0
    padding-bottom: 0

  .buffer
    display: block
    margin-top: 0
    margin-bottom: 20px
    position: relative

    &.focus:not(.hasmore)
      .inline-button
        display: none

    .title
      border-bottom: 1px solid transparent
      border-top: 1px solid transparent
      color: #616161
      margin: 0
      padding: 20px 6px 10px 22px
      position: sticky
      top: 55px
      z-index: 1
      transition: all 400ms
      display: flex

      &:before
        content: ""
        display: block
        left: -16px
        right: -16px
        top: 0
        bottom: 0
        background-color: #f2f2f2
        position: absolute
        z-index: -2

        @media(max-width: 800px)
          left: 0
          right: 0

      &:after
        content: ""
        display: block
        left: 0
        right: 0
        top: 0
        bottom: 0
        background-color: transparent
        transition: margin-left 400ms, margin-right 400ms, background-color 400ms
        will-change: margin-left, margin-right, background-color
        position: absolute
        z-index: -1

      h2
        flex: 1
        line-height: 36px

      button
        border-radius: 3px
        box-shadow: none
        color: #444444
        text-transform: uppercase
        border: none
        position: relative
        font-weight: normal
        margin-bottom: 0
        text-align: center
        vertical-align: middle
        touch-action: manipulation
        background: transparent none
        white-space: nowrap
        padding: 6px 16px
        font-size: 13px
        line-height: 1.846
        @include vendor-prefix('user-select', 'none')
        text-decoration: none
        box-sizing: border-box
        font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif
        will-change: background
        opacity: 0
        pointer-events: none
        cursor: none
        transition: opacity 0.4s 0.2s, background 0.4s

        &:hover
          background-color: rgba(0, 0, 0, 0.06)

        &:after
          content: ""
          display: block
          position: absolute
          width: 100%
          height: 100%
          top: 0
          left: 0
          background: radial-gradient(circle, #444444 10%, transparent 10.01%) no-repeat 50%
          background-size: 1000% 1000%
          opacity: 0
          pointer-events: none
          transition: background .5s, opacity 1s

        &:active
          &:after
            background-size: 0 0
            opacity: .2
            transition: 0s

    &:not(.focus) .secondary
      display: none

    &:before
      content: ""
      display: block
      left: 0
      right: 0
      top: 0
      bottom: 0
      background-color: transparent
      transition: margin-left 400ms, margin-right 400ms, margin-bottom 400ms, background-color 400ms
      will-change: margin-left, margin-right, margin-bottom, background-color
      position: absolute
      z-index: -1

    &.focus
      &:before
        margin-bottom: -16px
        background-color: #ddd

        @media(min-width: 800px)
          margin-left: -16px
          margin-right: -16px

      .title
        &:after
          background-color: #ddd

          @media(min-width: 800px)
            margin-left: -16px
            margin-right: -16px

        button
          opacity: 1
          display: inline-block
          cursor: pointer
          pointer-events: initial

    .container
      font-size: 13px

      > .inline-button
        overflow: hidden
        font-size: 14px
        line-height: 24px
        padding: 7px 24px
        border-bottom: 1px solid #e5e5e5
        color: #555
        background: #f0f0f0
        cursor: pointer
        @include vendor-prefix('user-select', 'none')
        transition: height 400ms
        position: relative
        box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24)

        &:before
          content: ""
          display: inline-block
          height: 24px
          width: 24px
          background-image: url(../icons/dots-horizontal.svg)
          background-size: cover
          vertical-align: top
          margin-right: 16px

      .context
        display: block
        position: relative

        &.focus
          padding: 0
          margin: 1rem -1rem

          @media(max-width: 800px)
            margin: 1rem 0

        &:before
          bottom: 0
          box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24)
          content: ''
          display: block
          left: 0
          pointer-events: none
          position: absolute
          right: 0
          top: 0

        > .container > .inline-button
          box-shadow: none

        &:not(.focus)
          > .before, > .after
            display: none

          > .inline-button
            display: none

        .message
          display: flex
          line-height: 24px
          padding: 12px 24px
          border-bottom: 1px solid #e5e5e5
          color: #212121
          background: #fff
          position: relative

          > .more
            height: 56px
            width: 56px
            position: relative
            padding: 16px 13px
            cursor: pointer
            color: #555
            transition: all .15s
            text-decoration: none
            text-align: center
            margin-right: -24px
            margin-top: -12px
            @include vendor-prefix('user-select', 'none')

            &:before
              background-color: rgba(255, 255, 255, .12)
              bottom: 9px
              content: ' '
              left: 9px
              margin: auto
              padding: 4px
              position: absolute
              right: 9px
              top: 9px
              z-index: -1
              border-radius: 50%
              opacity: 0
              transition: opacity 100ms

            &:hover:before
              opacity: 1

          time
            width: 136px
            display: inline-block
            text-align: right
            flex-shrink: 0
            font-family: monospace
            font-size: 85%
            color: #444

            @media(max-width: 800px)
              position: absolute
              right: 8px
              bottom: 8px
              width: initial
              font-style: italic
              color: #777

          .container
            display: flex
            flex-grow: 1
            flex-shrink: 1
            overflow: hidden

            @media(max-width: 800px)
              display: block
              padding-bottom: 16px

            .sender
              width: 148px
              display: inline-block
              padding: 0 24px
              font-weight: bold
              flex-shrink: 0
              overflow: hidden
              text-overflow: ellipsis

              .invisible
                font-size: 0
                opacity: 0

              @media(max-width: 800px)
                width: initial
                padding: 0

              &:after
                @media(max-width: 800px)
                  content: ': '
                  margin-right: 8px

            .content
              flex-grow: 1
              overflow: hidden

              .irc_highlight
                background-color: rgba(251, 246, 167, 0.5)
                color: #212121 !important

              @media(max-width: 800px)
                vertical-align: top
                display: inline

                span
                  vertical-align: top