$primary-color: #009688
$primary-color-highlight: lighten($primary-color, 10%)
$accent-color: #795548
$accent-color-highlight: lighten($accent-color, 10%)

$box-shadow-1: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
$box-shadow-2: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)

$nav-height: 75px

body
  padding-top: $nav-height
  padding-bottom: 50px
  background: lightgrey
  font-size: 16px

a
  color: $accent-color
  transition: all 230ms ease-in-out
  &:hover
    color: $accent-color-highlight

.button.button-primary,
button.button-primary,
input[type="button"].button-primary,
input[type="reset"].button-primary,
input[type="submit"].button-primary
  background-color: $primary-color
  border-color: $primary-color
  font-size: 1.5rem
  transition: all 230ms ease-in-out
  &:hover
    background-color: $primary-color-highlight
    border-color: $primary-color-highlight

.container
  max-width: 1100px
  padding: 20px 30px

.card
  background: white
  box-shadow: $box-shadow-2

#main-nav
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: $nav-height
  background: $primary-color
  color: white
  font-size: 3rem
  font-weight: bold
  box-shadow: $box-shadow-1
  z-index: 100

  .nav-left
    float: left

  .nav-menu
    list-style: none
    padding-left: 15px

    li
      display: inline-block
      margin-top: 12px
      margin-left: 15px

  .nav-link a
    color: white
    &:hover
      color: #eee

#main-wrapper
  margin-top: 25px

#ticket-form,
#comment-form
  textarea
    max-width: 100%
    height: 250px
    min-height: 100px

#queue-header,
#ticket-header
  margin-bottom: 15px

  .queue-title,
  .ticket-title
    margin-bottom: 5px

  .queue-created,
  .queue-updated,
  .ticket-created,
  .ticket-updated
    margin-bottom: 3px
    color: #666
    font-size: 1.5rem
    font-style: italic

#queue-description,
#ticket-body
  p:last-child
    margin-bottom: 5px

.ticket-attributes
  list-style: none
  margin: 0
  border: 1px solid #bbb
  border-bottom: none
  box-shadow: $box-shadow-1
  font-size: 1.75rem

  > li
    margin: 0
    padding: 10px 12px
    border-bottom: 1px solid #999

  .ticket-actions
    padding: 0

    ul
      list-style: none
      margin: 0

    li
      display: inline
      margin: 0
      padding: 0
      &:not(:first-child)
        a
          border-left: 1px solid #999

      a
        position: relative
        display: inline-block
        box-sizing: border-box
        width: 50%
        height: 100%
        padding: 10px 12px
        text-align: center
        &:hover
          background: rgba(0, 0, 0, .1)

        i
          margin-right: 5px
          font-size: 2rem

  .ticket-queue,
  .ticket-severity,
  .ticket-status
    transition: all 230ms ease-in-out
    &:hover
      background: rgba(0, 0, 0, .1)
      cursor: pointer

#comment-form
  textarea
    height: 150px

.comments-list
  list-style: none
  margin: 0

  .comment
    &:not(:last-child)
      border-bottom: 1px solid #666
    p:last-child
      margin-bottom: 5px