.table {
  margin-bottom: var(--pix-spacing-4x);
}

/* stylelint-disable selector-class-pattern */
table {
  box-sizing: border-box;
  width: 100%;
  background-color: var(--pix-neutral-0) ;
  border-collapse: collapse;
  border-spacing: 0;

  a:not(.pix-button, .sidebar__link, .login-form__oidc-connect-link) {
    color: var(--pix-tertiary-500);
    text-decoration: underline;

    &:visited {
      color: var(--pix-primary-500);
    }
  }
}

thead {
  width: 100%;
}

tbody {
  tr.tr--clickable {
    cursor: pointer;

    &:hover,
    &:focus,
    &:active {
      background-color: var(--pix-neutral-20);
      transition: 0.25s ease;
    }
  }
}

tr {
  width: 100%;
  height: 60px;
}

td,
th {
  padding-left: 30px;
  text-align: left;
  text-overflow: ellipsis;
}

td.td--bold {
  font-weight: var(--pix-font-medium);
}

.table__column {
  width: 16%;

  &--small {
    width: 6%;
  }

  &--medium {
    width: 10%;
  }

  &--wide {
    width: 25%;
  }

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

  &--break-word {
    word-break: break-all;
  }
}

.table__cell--percentage {
  display: flex;
  align-items: center;

  span {
    margin-left: var(--pix-spacing-1x);
    color: var(--pix-neutral-60);
    font-weight: var(--pix-font-medium);
    font-size: var(--font-size-small);
  }
}

.table__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  text-align: center;
  border-top: 1px solid var(--pix-neutral-100);
}

.break-word {
  word-break: break-word;
}
