table.migration-list > thead > tr > td,
table.migration-list > tbody > tr > td

  &[data-id="status"]
    width: 20%
    padding-right: 12px

  &[data-id="creation_date"],
  &[data-id="last_update"]
    width: 15%

  &[data-id="age"]
    width: 5%
    text-align: right

  &[data-id="domain_status"]
    width: 2%
    min-width: 20px
    padding: 8px 4px

  &[data-id="admin"]
    width: 14%

  &[data-id="id"]
    width: 10%

  &[data-id="actions"]
    width: 13.5%
    padding-right: 8px

table.migration-list > tbody > tr > td

  &[data-id="status"]

    .badge
      display: inline-block
      width: 100%
      height: 19px
      font-size: 10px
      text-transform: uppercase
      text-align: center
      text-overflow: ellipsis
      letter-spacing: .05em
      background: #e3e3e3
      border-radius: 2px
      padding: 3px 8px 2px
      margin-top: 4px
      box-sizing: border-box
      overflow: hidden

      .value
        font-weight: bold

    &[data-status~="setup"],
    &[data-status~="migration"],
    &[data-status~="finalization"]
      .badge
        color: #fff
        background: #3c6

    &[data-status~="error"]
      .badge
        color: #fff
        background: #f66

    &[data-status~="rollback"]
      .badge
        color: #fff
        background: #39e

    &[data-status~="probably_failed"]
      .badge
        color: #333
        background: #fc3

  &[data-id="creation_date"],
  &[data-id="last_update"]
    white-space: normal
    padding-top: 10px

  &[data-id="age"]
    font-size: .9em

  &[data-id="domain_status"]
    text-align: right

    .badge
      display: inline-block
      width: 7px
      min-width: 7px
      height: 7px
      background: #ddd
      border-radius: 50%

    &[data-value="natural"] .badge
      background: #6c6

  &[data-id="id"] .value
    display: inline-block
    max-width: 100%
    font-size: 11px
    font-family: monospace
    text-overflow: ellipsis
    background: #f3f3f3
    border-radius: 2px
    padding: 2px 8px 1px
    margin-top: 5px
    box-sizing: border-box
    overflow: hidden

  &[data-id="actions"] > input[type="radio"]
    display: none

  .hover-card
    width: 360px
    background: #f8f8f8
    border: 1px solid #e8e8e8
    border-radius: 2px
    box-shadow: 0 0 6px #ddd
    padding: 8px
    margin-left: -4px
    transform: translate(-100%, -50%)
    position: absolute
    left: 0
    top: 50%

    textarea
      height: 3rem

    &-container
      display: none
      position: relative

  :checked + .hover-card-container
    display: inline-block

    & + .button
      display: none

  [data-action="close"]

    &, &:hover, &:visited
      display: inline-block
      width: 18px
      height: 18px
      font: normal 12px/18px sans-serif
      text-decoration: none
      text-align: center
      color: rgba(0, 0, 0, .8)
      border: 1px solid rgba(0, 0, 0, .5)
      border-radius: 50%
      margin-left: .5rem
      transform: translateY(-1px)
      cursor: pointer
