.table {
  background: rgb(var(--panel));
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  line-height: 17px;
  color: rgb(var(--text-muted));

  &--with-margin {
    margin-bottom: scale.$sm--1;
  }

  table {
    background: rgb(var(--background));
    border-radius: 5px;
    border-spacing: 0;
    border: 1px solid;
    // border-color must be separated out to work around a bug in clean-css
    // https://github.com/hashicorp/waypoint/issues/2376
    border-color: rgb(var(--border));
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
  }

  caption {
    font-weight: normal;
    text-align: left;
    margin-bottom: 10px;
  }

  thead {
    font-weight: normal;
    th {
      font-weight: normal;
    }
  }

  th,
  td {
    padding: 8px 10px;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  tbody {
    th {
      font-weight: normal;
    }
    th,
    td {
      border-top: 1px solid rgb(var(--border));
    }
  }

  .resource-icon {
    display: flex;
    align-items: flex-end;

    svg {
      margin-right: scale.$sm-3;
    }
  }

  &__icon-text-cell-span {
    display: inline-flex;
    align-items: flex-end;
    height: inherit;
    margin-top: 1px;

    svg {
      margin-right: scale.$sm-3;
    }
  }

  &__deployment-info-cell {
    > .pds-button {
      height: 1%;
      padding: scale.$sm-4 scale.$sm-2;
    }
  }

  &__id-column {
    a {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .w-1\/2 {
    width: 50%;
  }
  .w-1\/3 {
    width: 33.333%;
  }
  .w-1\/4 {
    width: 25%;
  }
  .w-1\/5 {
    width: 20%;
  }
  .w-2\/5 {
    width: 40%;
  }
  .w-3\/5 {
    width: 60%;
  }
}
