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

.evaluation-results-tab__area {
  margin-top: var(--pix-spacing-8x);
}

.evaluation-results-tab__area-title {
  @extend %pix-title-xs;

  color: var(--pix-neutral-900);

  &::before {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-top: 1px;
    vertical-align: -0.075em;
    border-radius: 50%;
    content: '';
  }

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

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

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

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

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

.evaluation-results-tab__competences-table {
  width: 100%;
  margin-top: var(--pix-spacing-4x);
}

.evaluation-results-tab__competence {
  display: grid;
  grid-template-columns: 10rem 1fr auto;
  overflow: hidden;
  background-color: var(--pix-neutral-0);
  border: 1px solid var(--pix-neutral-100);
  border-radius: 1rem;

  &:not(:first-child) {
    margin-top: var(--pix-spacing-2x);
  }
}

.evaluation-results-tab-competence__image-cell {
  text-align: center;
  border-right: 1px solid var(--pix-neutral-100);

  img {
    position: relative;
    top: 50%;
    width: 4.5rem;
    max-width: 100%;
    height: 4.5rem;
    object-fit: contain;
    transform: translateY(-50%);
  }
}

.evaluation-results-tab-competence__content-cell {
  min-width: 0;
  padding: var(--pix-spacing-4x);
}

.evaluation-results-tab-competence__name {
  @extend %pix-title-xs;
}

.evaluation-results-tab-competence__description {
  @extend %pix-body-s;

  margin-top: var(--pix-spacing-2x);
  color: var(--pix-neutral-500);
}

.evaluation-results-tab-competence__results-cell {
  align-self: center;
  padding: var(--pix-spacing-2x) var(--pix-spacing-6x);
}

.evaluation-results-tab-competence-results__stars {
  height: 1.5rem;
  margin-bottom: var(--pix-spacing-1x);
}

.evaluation-results-tab-competence-results__mastery-percentage {
  margin-left: var(--pix-spacing-1x);
  color: var(--pix-neutral-500);
}

@media screen and (max-width: 768px) {
  .evaluation-results-tab__competence {
    grid-template:
      'image content content'
      'image results results' / 5.5rem 1fr auto;
  }

  .evaluation-results-tab-competence__image-cell {
    grid-area: image;
    padding: 0 var(--pix-spacing-3x);
  }

  .evaluation-results-tab-competence__content-cell {
    grid-area: content;
  }

  .evaluation-results-tab-competence__results-cell {
    grid-area: results;
    padding: 0 var(--pix-spacing-4x) var(--pix-spacing-4x);
  }
}
