table.service-list
  max-width: 880px
  table-layout: fixed
  line-height: 1.2
  border-spacing: 0
  border: none
  margin: 1em 0

  .secondary
    opacity: .5

  .user-uid
    font-size: .85rem
    color: rgba(#999, .75)

  & > tbody > tr > th,
  & > tbody > tr > td
    border-top: 1px solid rgba(#000, .07)

  & > tbody > tr:first-child > th,
  & > tbody > tr:first-child > td
    border-top: 2px solid rgba(#000, .07)

  & > tbody > tr.spacer > th,
  & > tbody > tr.spacer > td
    height: 1.5rem
    border-top: none

  & > tbody > tr > th
    font-size: 1.1em
    font-weight: normal

  & > tbody > tr > th,
  & > tbody > tr > td
    text-align: start
    vertical-align: top
    color: inherit
    padding: .6rem .55rem .55rem

  & > tbody > tr > td[data-id="details"]
    padding: 0

  & > tbody > tr > td[data-id="icon"]
    width: 32px

    & > span
      display: inline-block
      width: 32px
      height: 32px
      background-position: 50% 50%
      background-size: 18px
      background-repeat: no-repeat
      border: 1px solid rgba(#000, .1)
      border-radius: 50%

  & > tbody > tr > th[data-id="name"]
    width: 29%
    padding-right: 2.5rem
    box-sizing: border-box

    .badge
      display: inline-block
      width: 8px
      min-width: 8px
      height: 8px
      background: #ddd
      border-radius: 50%
      margin-right: .55em
      transform: translateY(-1px)

  & > tbody[data-enabled="false"] > tr > [data-id="name"] .badge
    background: #f66

  & > tbody[data-enabled="true"][data-ready="true"] > tr > [data-id="name"] .badge
    background: #6c6

  & > tbody[data-enabled="true"][data-ready="false"] > tr > [data-id="name"] .badge
    background: #fb0

  table
    width: 100%
    table-layout: fixed
    border-spacing: 0
    border: none
    margin: 0

    & > tbody > tr

      & > th,
      & > td
        vertical-align: top
        border-bottom: 1px solid rgba(#000, .075)
        padding: .5rem .55rem .45rem
        box-sizing: border-box

        &[data-id="actions"]
          width: 25%
          padding-left: 1.5rem

      &:first-child > th,
      &:first-child > td
        border-top: none

      & > th:first-child,
      & > td:first-child
        width: 31%
        padding-right: .5rem

      & > th
        font-weight: normal
        text-align: left
        color: #aaa

  tbody[data-id="props"]

    & > tr:first-child > th,
    & > tr:first-child > td
      border-top: 1px solid rgba(#000, .075)

  tbody[data-id="timeline"]

    & > tr > th,
    & > tr > td
      border-bottom: none

    & > tr:not(:first-child) > th,
    & > tr:not(:first-child) > td
      padding-top: .25rem

    & > tr:not(:last-child) > th,
    & > tr:not(:last-child) > td
      padding-bottom: 0

    /*
    [data-future="true"]

      & > [data-id="date"],
      & > [data-id="description"] .description
        opacity: .25
    */

    [data-id="date"]
      white-space: nowrap

    [data-id="date"] > span:after
      content: "✓"
      font-size: .8rem
      margin-left: .6rem
      opacity: .5

    [data-future="true"] [data-id="date"] > span:after
      visibility: hidden

    [data-id="description"]

      .badge
        display: inline-block
        max-width: 160px
        font-size: 9px
        text-transform: uppercase
        text-align: center
        text-overflow: ellipsis
        letter-spacing: .05em
        vertical-align: middle
        color: #888
        background: #f0f0f0
        border-radius: 2px
        padding: 3px 8px 2px
        margin-left: .5em
        position: relative
        top: -1px
        box-sizing: border-box
        overflow: hidden

      .icon
        display: inline-block
        margin: 0 .15rem
        transform: translateY(.1rem)
