@use 'pix-design-tokens/breakpoints';
@use 'pix-design-tokens/fonts';
@use '../globals/text' as *;

.tutorial-panel {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.tutorial-panel__hint-container-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  padding: 20px 0 40px;

  @include breakpoints.device-is('tablet') {
    flex-direction: row;
  }
}

.tutorial-panel__hint-container {
  display: flex;
  flex-direction: column;
  max-width: 991px;
  border-radius: 5px;
}

.tutorial-panel__tutorials-container {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;

  & .tutorial-card {
    margin-bottom: 16px;
  }
}

.tutorial-panel__tutorial-info {
  margin: -5px 5px 0;
  color: var(--pix-neutral-500);
  font-size: 0.813rem;
  line-height: 1.25rem;
}

.tutorial-panel__hint-title {
  @include tutorial-panel-title(var(--pix-neutral-20));
}

.tutorial-panel__hint-content {
  font-size: 1.125rem;

  ul,
  ol {
    margin: var(--pix-spacing-1x) 0;
    padding: revert;
    list-style: revert;
  }


  & p {
    padding: 12px 12px 0;
  }
}

.tutorial-panel__hint-picto-container {
  vertical-align: middle;
}

.tutorial-panel__hint-picto {
  min-width: 100px;
  padding: 0 20px;
}
