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

.mission-list {
  &__title {
    margin: 1em 0;
  }
}

.mission-list-banner {
  margin-bottom: var(--pix-spacing-2x);

  a {
    font-weight: bolder;
    text-decoration: underline;
  }

  li {
    margin-top: 3px;
    margin-bottom: 7px;
    margin-left: 15px;
    list-style: disc;

    li {
      margin-left: 15px;
      list-style: circle;
    }
  }

  &__school-code {
    display: inline-flex;

    .pix-icon-button {
      fill: var(--pix-info-700);
    }
  }

  &__copypaste-container {
    display: flex;
    flex-direction: column;
    text-align: start;

    .copy-paste-button {
      &__clipboard {
        margin: -6px 6px 0 2px;
      }
    }

    .copy-paste-button-container {
      margin-top: 4px;
    }

    .pix-icon {
      width: 1rem;
      height: 1rem;
    }


    .pix-icon-button {
      width: 1.5rem;
      min-width: 1.5rem;
      height: 1.5rem;
    }


    span, a {
      display: flex;
      align-items: center;
    }

    #external-link-icon {
      margin-left: 4px;
      text-decoration: none;
    }
  }
}

.button_import {
  width: fit-content;
  margin: 5px;
  padding: 5px;
}

.mission-header {
  margin-bottom: var(--pix-spacing-8x);

  &-informations {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--pix-spacing-6x);
    margin-bottom: var(--pix-spacing-2x);

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

      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &__documentation-button {
      display: flex;
      gap: var(--pix-spacing-4x);
      width: fit-content;
      margin: var(--pix-spacing-4x);
    }
  }
}

.mission-header-objectives {
  @extend %pix-body-l;

  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--pix-spacing-8x);
  margin-top: var(--pix-spacing-8x);

  h2 {
    margin-bottom: var(--pix-spacing-4x);
    text-decoration: underline;
  }

  &__list {
    margin-top: var(--pix-spacing-2x);
    margin-left: var(--pix-spacing-6x);
    list-style: disc;
  }
}

.learners-title {
  margin-bottom: var(--pix-spacing-4x)
}

