/*
* Timeline component
*
*/

@use '../../../style/core/utilities.scss' as utilities;

.dnb-timeline {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;

  &__item {
    &__label {
      display: flex;
      align-items: center;
      padding: 0;

      text-align: left;

      &__icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;

        height: auto;
        padding: 0;

        color: var(--token-color-icon-neutral);
        // No icon color token equivalent, figma sketch is using --token-color-background-page-background, as the icon fill should match the page background color
        background-color: var(--token-color-background-page-background);

        @include utilities.fakeBorder(
          var(--token-color-stroke-neutral),
          0.0625rem,
          inset
        );
      }

      &__title {
        cursor: text;
      }
    }

    &__content {
      padding-bottom: var(--spacing-small);
      // No stroke token equivalent for this color, the figma sketch is using --token-color-text-neutral-alternative
      border-left: 1px dashed var(--token-color-text-neutral-alternative);

      &__subtitle {
        cursor: text;

        font-size: var(--font-size-x-small);
        font-weight: var(--font-weight-basis);
        color: var(--token-color-text-neutral-alternative);
      }

      &__info {
        padding-top: var(--spacing-x-small);
      }
    }

    &--completed &__content {
      border-left: 1px solid var(--token-color-stroke-neutral);
    }

    &--completed &__label__title {
      color: var(--token-color-text-neutral);
    }

    &--upcoming &__label__title {
      color: var(--token-color-text-neutral-alternative);
    }

    &--upcoming:not(.dnb-skeleton) &__label__icon {
      color: var(--token-color-text-neutral-alternative);
      background-color: var(--token-color-background-neutral-subtle);

      @include utilities.fakeBorder(
        // Border color same as background color, no stroke equivalent for this color. Figma sketch has no border
        var(--token-color-background-neutral-subtle),
        0.0625rem,
        inset
      );
    }

    &:last-child &__content {
      border-left: none;
    }
  }
}