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

.tubes-selection {
  margin-bottom: var(--pix-spacing-6x);
  color: var(--pix-neutral-800);

  &__card {
    margin-bottom: var(--pix-spacing-6x);
  }

  &__inline-layout {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pix-spacing-4x);
    align-items: center;
  }

  &__multi-select {
    display: flex;
    gap: var(--pix-spacing-2x);
    align-items: center;

    label {
      flex-shrink: 0;
      margin: 0;
    }
  }

  &__multi-select-label {
    padding-right: var(--pix-spacing-4x);
    font-weight: 500;
  }

  &__level-select {
    width: 141px;
  }

  &__vertical-delimiter {
    height: 2rem;
    border-left: 1px solid var(--pix-neutral-100);
  }

  &__count {
    margin-left: auto;
  }
}

.select-tube-table {
  .icon-container > svg {
    width: 1.8rem;
    height: 1.8rem;
  }

  .is-responsive {
    color: var(--pix-success-700);
  }

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

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

    p {
      margin-bottom: 0.5rem;
    }
  }

  th,
  td {
    vertical-align: middle;

    .icon-container {
      position: relative;
      display: inline-block;

      &:first-child {
        margin-right: 0.5rem;
      }
    }
  }

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

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

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

    &.row-thematic {
      border-top: dashed 1px var(--pix-neutral-100);
    }
  }
}

.area-border-container {
  position: relative;
  box-shadow: 0 4px 8px rgb(7 20 46 / 8%);

  .area-border {
    position: absolute;
    top: 12px;
    left: 1rem;
    z-index: 2;
    width: 4px;
    height: calc(100% - 24px);
    background-color: var(--pix-primary-700);
    border-radius: 2px;

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

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

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

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

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

.pix-accordions__content {
  padding: 0;
}

.list-competences {
  &.pix-accordions__title {
    position: relative;
    align-items: center;
    padding-left: 2rem;

    @extend %pix-title-xs;

    background-color: var(--pix-neutral-0);

    &:hover {
      background-color: var(--pix-neutral-20);
    }
  }

  & + .pix-accordions__content {
    padding: 0 0 1rem 2rem;
    cursor: auto;
  }
}

.competence-container {
  .pix-accordions {
    border-radius: 0;
    box-shadow: none;
  }
}

.level-selection {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 10px 0;

  .skill-availability {
    display: flex;
    gap: 2px;
  }

  .skill-square {
    padding: 0 4px;
    color: var(--pix-neutral-0);
    border-radius: 4px;

    &__active {
      background-color: var(--pix-success-700);
    }

    &__missing {
      background-color: var(--pix-error-700);
    }
  }
}
