@use 'pix-design-tokens/typography';

.download-file {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  padding: 0.5em 0;

  &__button {
    width: fit-content;
  }
}

.preselect-tube-table {
  .is-responsive {
    fill: var(--pix-success-700);
  }

  .not-responsive {
    fill: var(--pix-error-700);
  }

  .table__column {
    &--medium {
      width: 30%;
    }

    &--wide {
      width: 60%;
    }

    &--small {
      width: 5%;
    }
  }
}

.preselect-target-profile {
  .pix-accordions {
    &__title {
      @extend %pix-title-s;

      position: relative;
      align-items: center;
      padding-left: 2rem;

      &:before {
        position: absolute;
        top: 10%;
        left: 1rem;
        height: 80%;
        border-left: 3px solid;
        content: '';
      }

      &.jaffa:before {
        border-color: var(--pix-information-light);
      }

      &.emerald:before {
        border-color: var(--pix-content-light);
      }

      &.cerulean:before {
        border-color: var(--pix-communication-light);
      }

      &.wild-strawberry:before {
        border-color: var(--pix-security-light);
      }

      &.butterfly-bush:before {
        border-color: var(--pix-environment-light);
      }
    }

    &__content {
      padding: 0 1rem;
      cursor: auto;

      h2 {
        @extend %pix-title-xs;

        margin: 0;
        padding: 1rem;
        color: var(--pix-neutral-900);
      }

      table {
        color: var(--pix-neutral-800);
        border-collapse: collapse;
      }

      th {
        color: var(--pix-neutral-900);
        font-weight: 500;
      }

      th,
      td {
        padding-left: 1rem;
        text-align: left;
        vertical-align: middle;
      }

      tr:not(:first-child) {
        border-top: 1px solid var(--pix-neutral-20);
      }

      td.table__column--center,
      th.table__column--center {
        text-align: center;
      }

      thead {
        background: var(--pix-neutral-20);
      }
    }
  }
}
