/* stylelint-disable no-descending-specificity */
@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/typography';
@use 'pix-design-tokens/fonts';

@include breakpoints.device-is('tablet') {
  .competence-card {
    height: 310px;
  }

  .competence-card__title {
    height: 125px;
    padding: 10px 0;
    overflow: hidden;
    text-align: center;
  }

  .competence-card__wrapper {
    &::after {
      top: -330px;
      right: -200px;
      bottom: 0;
      left: -200px;
      width: auto;
    }

    &--jaffa,
    &--jaffa::after {
      background: radial-gradient(var(--pix-information-dark) 25%, var(--pix-information-light) 100%);
      background-color: var(--pix-information-dark);
    }

    &--emerald,
    &--emerald::after {
      background: radial-gradient(var(--pix-content-dark) 25%, var(--pix-content-light) 100%);
      background-color: var(--pix-content-dark);
    }

    &--cerulean,
    &--cerulean::after {
      background: radial-gradient(var(--pix-communication-dark) 25%, var(--pix-communication-light) 100%);
      background-color: var(--pix-communication-dark);
    }

    &--wild-strawberry,
    &--wild-strawberry::after {
      background: radial-gradient(var(--pix-security-dark) 25%, var(--pix-security-light) 100%);
      background-color: var(--pix-security-dark);
    }

    &--butterfly-bush,
    &--butterfly-bush::after {
      background: radial-gradient(var(--pix-environment-dark) 25%, var(--pix-environment-light) 100%);
      background-color: var(--pix-environment-dark);
    }
  }

  .competence-card__area-name {
    z-index: 2;
    margin: 0;
    font-weight: var(--pix-font-medium);
    font-size: 0.7rem;
  }

  .competence-card__body {
    position: absolute;
    top: 80px;
    right: 0;
    bottom: 0;
    left: 0;
    flex-direction: column;
    height: auto;
    margin-top: 10px;
    margin-bottom: 4px;
    background: transparent;
    transition: top 0.2s ease-out;
  }

  .competence-card__link {
    z-index: 0;
    padding: 0;
  }

  .competence-card__link:hover {
    border: 12px solid rgb(var(--pix-neutral-0) 0.4);
  }

  .competence-card__link:hover .competence-card__score-details {
    opacity: 1;
  }

  .competence-card:hover .competence-card__interactions {
    bottom: 0;
    height: 70px;
  }

  .competence-card__button:hover .competence-card-button__label {
    left: -20px;
  }

  .competence-card__button:hover .competence-card-button__arrow {
    top: -2px;
    right: 20px;
    opacity: 1;
  }

  .competence-card:hover .competence-card__body {
    top: 32px;
  }

  .competence-card:hover {
    box-shadow:
      0 7px 14px 0 var(--pix-neutral-100),
      0 3px 6px 0 var(--pix-neutral-500);
  }

  .competence-card:hover .competence-card__title {
    height: 179px;
    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .competence-card__level {
    .score-label {
      display: block;
      text-transform: uppercase;
    }

    &--congrats {
      margin-bottom: 12px;
    }
  }

  .competence-card__congrats {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 140px;
    margin: -10px -5px;
    background: url('/images/scorecard-congrats.svg') no-repeat center center;
    background-size: contain;

    &--with-magnification {
      &:hover {
        width: 140px;
        height: 150px;
      }
    }
  }

  .competence-card__score-label--congrats {
    color: var(--pix-neutral-0);
  }

  .competence-card__score-value--congrats {
    color: var(--pix-neutral-0);
    font-weight: var(--pix-font-bold);
    font-size: 2.813rem;
  }

  .competence-card__congrats-message {
    position: absolute;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 34px;
    color: var(--pix-neutral-800);
    font-weight: var(--pix-font-bold);
    font-size: 0.938rem;
    font-family: fonts.$font-open-sans;
    letter-spacing: 0.063rem;
    text-transform: uppercase;
  }

  .competence-card__score-details {
    display: block;
    margin-top: 3px;
    margin-bottom: -4px;
    color: var(--pix-neutral-500);
    font-size: 0.625rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: underline;
    opacity: 0;
    transition: opacity 0.1s linear;
  }

  .competence-card__interactions {
    position: absolute;
    bottom: -34px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 34px;
    visibility: visible;
    transition: bottom 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-delay: 0s;

    .competence-card__button {
      position: relative;
      min-width: 140px;
      height: 34px;
    }

    .competence-card-button__label {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 2px;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: left 0.1s ease-out;
    }

    .competence-card-button__arrow {
      position: absolute;
      top: 0;
      right: 36px;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 8px;
      opacity: 0;
      transition: all 0.1s linear;
    }
  }

  .competence-card-interactions {
    &__improvement-countdown {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: default;
    }
  }

  .competence-card-improvement-countdown {
    &__label {
      color: var(--pix-neutral-500);
      font-size: 0.6875rem;
      letter-spacing: 0.0075rem;
    }

    &__count {
      margin-top: 6px;
      color: var(--pix-neutral-900);
      font-size: 1rem;
      letter-spacing: 0.01rem;
    }
  }
}

.competence-card__competence-name {
  @extend %pix-body-l;

  @include breakpoints.device-is('tablet') {
    z-index: 2;
    margin: 0 3px;
    padding-top: 10px;
  }
}
