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

@mixin add-dashboard-content-separator() {
  padding: var(--pix-spacing-8x) 0;
  border-bottom: 1px solid var(--pix-neutral-20);

  &:first-child {
    padding-top: 0;
  }
}

.dashboard-content {
  display: grid;
  grid-template-areas:
    'banner'
    'score'
    'main'
    'certif';
  grid-template-rows: auto;
  grid-template-columns: 100%;

  .dashboard-banner {
    grid-area: banner;
  }

  &__score {
    // stylelint-disable-next-line no-duplicate-selectors
    & {
      @include add-dashboard-content-separator;

      grid-area: score;
    }
  }

  &__main {
    grid-area: main;

    .dashboard-banner {
      display: none;
    }
  }

  &__certif {
    grid-area: certif;
  }

  @include breakpoints.device-is('tablet') {
    grid-template-areas:
      'banner banner banner banner banner banner'
      'score score score certif certif certif'
      'main main main main main main'
      'main main main main main main'
      'main main main main main main';
    grid-template-rows: auto;
    grid-template-columns: repeat(6, 1fr);

    .dashboard-banner {
      grid-area: banner;
    }

    &__score {
      grid-area: score;
      height: 100%;
    }

    &__certif {
      // stylelint-disable-next-line no-duplicate-selectors
      & {
        @include add-dashboard-content-separator;

        grid-area: certif;
        height: 100%;
        margin-bottom: 24px;
      }
    }

    &__main {
      grid-area: main;

      .dashboard-banner {
        display: none;
      }
    }
  }

  @include breakpoints.device-is('large-screen') {
    grid-template-areas:
      'main main main score'
      'main main main certif'
      'main main main certif'
      'main main main certif';
    grid-template-rows: auto;
    grid-template-columns: repeat(4, 1fr);

    .dashboard-banner {
      display: none;
    }

    &__main {
      grid-area: main;

      .dashboard-banner {
        // stylelint-disable-next-line no-duplicate-selectors
        & {
          @include add-dashboard-content-separator;

          display: block;

          &:first-child {
            padding-top: 0;
          }
        }

        & > .new-information {
          padding: var(--pix-spacing-6x) var(--pix-spacing-4x);
        }
      }
    }

    &__score {
      grid-area: score;
      margin: 0;
      padding-top: 0;
      border-bottom: none;
    }

    &__certif {
      grid-area: certif;
      margin: 0;
      border-bottom: none;
    }
  }
}

.dashboard-content-score {
  &__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 19px 0;
    background-color: var(--pix-neutral-0);
    border-radius: 10px;
    box-shadow: 0 1px 0 0 rgb(23 43 77 / 12%);

    @include breakpoints.device-is('large-screen') {
      margin-left: 34px;
      font-size: 0.8125rem;
    }
  }
}

.dashboard-content-score-wrapper__link {
  margin-top: var(--pix-spacing-3x);
  color: var(--pix-neutral-800);
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: underline;

  &:hover,
  &:focus {
    color: var(--pix-primary-500);
  }

  &:focus {
    font-weight: 700;
  }

  &:active {
    color: var(--pix-primary-900);
  }
}

.dashboard-section {
  @include add-dashboard-content-separator;

  &:last-child {
    border-bottom: none;
  }

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

    margin-bottom: var(--pix-spacing-1x);
    color: var(--pix-neutral-800);
  }

  &__subtitle {
    @extend %pix-body-m;

    margin-bottom: var(--pix-spacing-6x);
    color: var(--pix-neutral-500);
  }

  &__header {
    &--with-button {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }
  }

  &__button {
    display: none;

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