$primary-color: yellow
$primary-color-highlight: darken($primary-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: 60px

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

.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: #212121
  color: #eee
  font-size: 2.75rem
  box-shadow: $box-shadow-1

  .nav-left
    float: left

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

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

  .nav-link a
    color: $primary-color
    transition: all 230ms ease-in-out

    &:hover
      color: $primary-color-highlight

#main-wrapper
  margin-top: 25px

#ticket-header
  margin-bottom: 15px

  .ticket-title
    margin-bottom: 5px

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

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

.ticket-status
  list-style: none
  margin: 0
  border: 1px solid #bbb
  border-bottom: none

  > li
    margin: 0
    padding: 7px 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: calc(50% - 2px)
        height: 100%
        padding: 7px 12px
        text-align: center

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