@use '../../../globals/breakpoints';

.mission-page {
  margin-top: 20px;

  .header_container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  &__body {
    display: flex;
    margin-top: 16px;
    margin-left: 145px;

    @include breakpoints.device-is('tablet') {
      margin-left: 125px;
    }
  }

  &__details {
    display: flex;
    flex-direction: column;
    margin-top: 43px;
    margin-right: 40px;
    margin-left: 25px;
    text-align: left;

    .details-action {
      width: fit-content;
      margin-top: 32px;
      padding: 16px 32px 16px 40px;
      font-size: 18px;
      border-radius: 100px;

      &__icon {
        width: 25px;
        height: 25px;
        margin-left: 10px;
        fill: var(--pix-neutral-0);
      }

      &__loader {
        display: none;

        &--visible {
          width: 200px;
          height: 58px;
        }
      }
    }

    .details-go-back {
      margin-bottom: 21px;
      color: var(--pix-primary-700);
      text-decoration: underline;
    }

    .details-list {
      margin-left: 30px;

      img {
        width: 21px;
        margin: 4px;
      }

      &--with-bullet {
        display: list-item;
        list-style-type: disc;
      }

      &--with-image {
        display: flex;
        align-items: flex-start;
      }

      &__title {
        margin-bottom: 16px;
        font-weight: 800;
        font-size: 18px;

        &--big {
          font-size: 28px;
        }
      }

      &__item {
        display: flex;
        gap: 16px;
        align-items: center;
        margin-bottom: 8px;

        p {
          line-height: 28px;
        }

        .icon {
          color: var(--pix-primary-500);
        }
      }
    }
  }
}

.pix-button.pix1d-button.details-action {
  .loader__not-visible-text {
    height: 20px;
  }
}
