.table-holder {
  margin: 0;
  overflow: auto;
}

table {
  /*
  * TODO
  * This is a temporary workaround until we fix the neutral
  * color palette in https://gitlab.com/gitlab-org/gitlab/-/issues/213570
  *
  * The overwrites here affected the security dashboard tables, when removing
  * this code, table-th-transparent and original-text-color classes should
  * be removed there.
  *
  * Remove this code as soon as this happens
  */
  &.gl-table {
    @include gl-text-gray-500;
  }

  &.table {
    margin-bottom: $gl-padding;

    .dropdown-menu a {
      text-decoration: none;
    }

    .success,
    .warning,
    .danger,
    .info {
      color: $white;

      a:not(.btn) {
        text-decoration: underline;
        color: $white;
      }
    }

    tr {
      td,
      th {
        padding: 10px $gl-padding;
        line-height: 20px;
        vertical-align: middle;
      }

      th {
        @include gl-bg-gray-50;
        border-bottom: 0;

        &.wide {
          width: 55%;
        }

        &.table-th-transparent {
          background: none;
          color: $gl-text-color-secondary;
        }

        &.original-gl-th {
          @include gl-text-gray-500;
          border-bottom: 1px solid $cycle-analytics-light-gray;
        }
      }

      td {
        border-color: $white-normal;
      }
    }

    .thead-white {
      th {
        background-color: $white;
        color: $gl-text-color-secondary;
        border-top: 0;
      }
    }
  }

  &.responsive-table {
    @include media-breakpoint-down(sm) {
      thead {
        display: none;
      }

      &,
      tbody,
      td {
        display: block;
      }

      td {
        color: $gl-text-color-secondary;
      }

      tbody td.responsive-table-cell {
        padding: $gl-padding 0;
        width: 100%;
        display: flex;
        text-align: right;
        align-items: center;
        justify-content: space-between;

        &[data-column]::before {
          content: attr(data-column);
          display: block;
          text-align: left;
          padding-right: $gl-padding;
          color: $gl-text-color-secondary;
        }

        &:not([data-column]) {
          flex-direction: row-reverse;
        }
      }

      tr.responsive-table-border-start,
      tr.responsive-table-border-end {
        display: block;
        border: solid $gl-text-color-quaternary;
        padding-left: 0;
        padding-right: 0;

        > td {
          border-color: $gl-text-color-quaternary;

          &,
          &:last-child {
            padding-left: $gl-padding;
            padding-right: $gl-padding;
          }
        }
      }

      tr.responsive-table-border-start {
        border-width: 1px 1px 0;
        border-radius: $border-radius-default $border-radius-default 0 0;
        padding-top: 0;
        padding-bottom: 0;

        > td:first-child {
          border-top: 0; // always have the <table> top border
        }

        > td:last-child {
          border-bottom: 1px solid $gl-text-color-quaternary;
        }
      }

      tr.responsive-table-border-end {
        border-width: 0 1px 1px;
        border-radius: 0 0 $border-radius-default $border-radius-default;
        margin-bottom: 2 * $gl-padding;

        > :last-child {
          border-bottom: 0;
        }
      }
    }
  }
}

.responsive-table:not(table) {
  @include media-breakpoint-down(sm) {
    th {
      width: 100%;
    }

    td {
      width: 100%;
      float: left;
    }
  }
}

.top-area + .content-list {
  th {
    border-top: 0;
  }
}

.vulnerability-list {
  @media (min-width: $breakpoint-sm) {
    .checkbox {
      padding-left: $gl-spacing-scale-4;
      padding-right: 0;

      + td,
      + th {
        padding-left: $gl-spacing-scale-4;
      }
    }

    .detected {
      width: 9%;
    }

    .status {
      width: 8%;
    }

    .severity {
      width: 10%;
    }

    .identifier {
      width: 16%;
    }

    .scanner {
      width: 15%;
    }
  }
}