ScryAddMentions {
  display: grid
  grid-template-columns: 1fr
  grid-template-rows: auto
  grid-column-gap: 1rem
  grid-row-gap: 0

  h1 {
    text-transform: uppercase
    font-size: .9rem
    letter-spacing: .1rem
    color: #fff
    filter: drop-shadow(0 0 2px hsla(0,100%,0%,0.1))
  }

  div.details {
    padding: var(--boundary) 0
    border-top:2px solid hsla(0, 100%, 100%, 0.5)

    min-height: 10vh

    display: grid
    grid-template-columns: auto
    grid-gap: 1rem
    justify-content: start
    align-content: center
    align-items: center

    (textarea) {
      background: #fff
      padding: .5rem
      border: none
      outline: none
    }

    label {
      color: #fff
      font-size: .8rem
      letter-spacing: 1px
      font-weight: 600
      text-transform: uppercase
    }
  }

  div.actions {
    grid-row: 3 / 4
    grid-column: 1 / 2
    justify-self: stretch

    margin-top: 2rem

    display: flex
    justify-content: space-between
  }
}