/*

These are lifted piecemeal from the style guide (https://git-aws.internal.justin.tv/pages/web/styles)
and modified to work within the existing CSS of admin-panel

*/

$hinted-grey-13: #E5E3E8;
$hinted-grey-14: #EFEEF1;

.twitch-table.twitch-table--rewards {
  thead th, td {
    padding: .6rem;
    vertical-align: top;
  }
  thead th {
    padding-top: 2rem;
    border-bottom: 0;
    vertical-align: bottom;
  }

  tr {
    &:nth-child(even) {
      background-color: $hinted-grey-14;
    }
    
    > :first-child {
      padding-left: 2rem;
    }
    
    > :last-child {
      padding-right: 2rem;
    }
  }

  thead th, td {   
    &.right {
      text-align: right;
    }

    &.center {
      text-align: center;
    }
  }

  &--nowrap {
    td {
      white-space: nowrap;
    }
  }

  &--celled {
    td {
      border-left: 1px solid $hinted-grey-14;
      border-right: 1px solid $hinted-grey-14;
    }
    
    tr:nth-child(even) td {
      border-color: $hinted-grey-13;
    }

    tr:last-child:nth-child(odd) td {
      border-bottom: 1px solid $hinted-grey-13;
    }

    thead th, td {
      padding: .8rem 1.4rem;
    }
  }
}

.text-center {
  text-align: center;
}

.reward-owned {
  border: 2px solid #7D5BBE;
  border-radius: 10px;
}
