/* variables */
@breakpoint-width: 40rem;
@table-max-width: 60rem;
@table-font-size: 0.84rem;

.table-instance {
  header {
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 1.25rem;
    align-content: center;
    
    h2 { 
      padding: 0.3125rem 0.625rem 0 0;
      margin: 0;
    }
  }

  .instances {
    flex-grow: 1;
    width: 100%;
    max-width: @table-max-width;
    opacity: 0;
    transition: opacity .5s ease;
    
    thead tr { padding-bottom: 1.25rem; }

    tr th {
      
      span {
        display: block;
        box-sizing: border-box;
        padding: 0.3125rem 0 0.9375rem 0.3125rem;
        text-align: left;
        font-size: 0.875rem;
      }
    }

    tr td {
      padding: 0.625rem 0.625rem 0.25rem 0.3125rem;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      overflow: hidden;
      
      &:nth-child(1) { width: 15%; }

      &:nth-child(2) { width: 20%; }

      &:nth-child(3) { width: 40%; }

      &:nth-child(4) { width: 10%; }

      &:nth-child(5) { width: 20%; }

      span, label, a { 
        font-size: @table-font-size;  
      }

      ul {
        float: left;
        width: 100%;
        padding: 0;
        margin: 0;

        li {
          list-style: none;
          float: left;
          margin: 0 0.625rem 0.25rem 0;
        }

        &.active-in li {
          &::after { content: ', '; }

          &:last-child { margin-bottom: 0; }

          &:last-child::after { content: ''; }
        }
      }

      .webhookurl-container {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;

        .webhookurl {
          display: block;
          max-width: 16.25rem;
          padding-right: 0.3125rem;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        a {
          display: flex;
          width: 3.90rem;
        }

        @media only screen and (max-width: @breakpoint-width) {
          justify-content: center;

          .webhookurl { display: none; }
        }
      }
    }

    tr td:last-child { padding: 0; }

    &.table-opacity-1 { opacity: 1; }

    @media only screen and (max-width: @breakpoint-width) {
      tr td { width: 20% !important; }
    }

    a:hover { text-decoration: none; }
  }

  .dark, .dark-contrast {
    .instances {
      tr th, tr td {
        span, label {
          color: #fff;
        }
      }
    }
  }

  .light, .light-contrast {
    .instances {
      tr th, tr td {
        span, label {
          color: #000;
        }
      }
    }
  }
}