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

.competence-results-panel-header {
  &__banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 4px;
    border-radius: 5px;

    &-result-comment {
      @extend %pix-title-l;

      margin: 0;
      color: var(--pix-neutral-0);
    }

    @include breakpoints.device-is('tablet') {
      margin: 12px;
      padding: 30px;
    }

    &--congrats {
      padding: 1rem;
      padding-top: 18rem;
      padding-bottom: 30px;
      text-align: center;
      background:
        url('/images/background/banners/congrats-mobile.png') center -240px no-repeat,
        linear-gradient(0deg, rgb(18 163 255) 0%, rgb(61 104 255) 100%);

      @include breakpoints.device-is('tablet') {
        align-items: flex-start;
        justify-content: center;
        padding: 3rem;
        padding-left: 22rem;
        background:
          url('/images/background/banners/congrats.png') top center no-repeat,
          linear-gradient(0deg, rgb(18 163 255) 0%, rgb(61 104 255) 100%);
        background-position: left -70px center;
      }

      @include breakpoints.device-is('desktop') {
        padding-left: 27rem;
      }
    }

    &--not-bad {
      padding: 1rem;
      padding-top: 18rem;
      text-align: center;
      background:
        url('/images/background/banners/not-bad.png') top center no-repeat,
        linear-gradient(0deg, rgb(18 163 255) 0%, rgb(61 104 255) 100%);

      @include breakpoints.device-is('tablet') {
        align-items: flex-start;
        justify-content: center;
        padding-top: 1rem;
        background-position: right -70px center;
      }

      @include breakpoints.device-is('desktop') {
        background-position: right center;
      }
    }

    &--too-bad {
      padding: 40px;
      background:
        url('/images/background/banners/too-bad.png') center no-repeat,
        linear-gradient(0deg, rgb(18 163 255) 0%, rgb(61 104 255) 100%);
    }
  }
}

.competence-results-banner {
  &__title {
    &--tablet {
      display: none;

      @include breakpoints.device-is('tablet') {
        display: inherit;
      }
    }

    &--mobile {
      display: inherit;

      @include breakpoints.device-is('tablet') {
        display: none;
      }
    }
  }

  &__subtitle {
    @extend %pix-title-xs;

    margin-top: 14px;
    color: var(--pix-neutral-0);
    text-align: center;

    @include breakpoints.device-is('tablet') {
      width: 400px;
    }

    @include breakpoints.device-is('desktop') {
      width: inherit;
    }

    &--left {
      @include breakpoints.device-is('tablet') {
        text-align: left;
      }
    }

    &--small {
      width: 300px;

      @include breakpoints.device-is('tablet') {
        width: 450px;
      }
    }
  }

  &__text {
    display: flex;

    @include breakpoints.device-is('tablet') {
      padding-top: 20px;
    }

    &--spaced {
      padding-top: 20px;
    }
  }
}

.competence-results-banner-text {
  &__results {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 16px;

    @include breakpoints.device-is('tablet') {
      flex-direction: column;
      padding-top: 0;
    }

    &--spaced {
      flex-direction: column;
      padding: 0 10px;

      @include breakpoints.device-is('tablet') {
        padding: 0 30px;
      }
    }
  }
}

.competence-results-banner-text-results {
  &__label {
    @extend %pix-body-m;

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

  &__value {
    @extend %pix-title-xs;

    padding: 0 10px;
    color: var(--pix-neutral-0);
    text-transform: capitalize;
  }
}
