// gives us v-alignment with content
@use 'sass:math';

$minorPointTopMargin: 5px;
$minorPointSize: 9px;
$majorPointSize: 41px;
$tailImageWidth: 10px;
$tailImageHeight: 64px;

.ui-timeline {
  display: flex;
  flex-direction: column;

  &__segment {
    display: flex;

    // modify first segment when it uses the minor point style
    // Ensures the line doesn't go above the minor point
    &:first-child {
      .ui-timeline__point--minor {
        &::after {
          top: $majorPointSize * 0.5;

          height: $majorPointSize * 0.5;
        }
      }
    }

    // never show a connector on the last segment's point
    // Ensures the line doesn't go below the minor point
    &:last-child {
      .ui-timeline__point--minor {
        &::after {
          top: 0;

          height: $majorPointSize * 0.5;
        }
      }

      .ui-timeline__figure {
        &::after {
          background-color: transparent;
        }
      }
    }
  }

  &__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 math.div($ui-spacer, 0.75) 0 0;

    &::after {
      flex: 1 0 auto;
      width: 1px;

      background-color: ui-color(paper-ink-lightest);

      content: '';
    }
  }

  &__point {
    border-radius: 50%;

    &--minor {
      position: relative;

      display: flex;
      align-items: center;
      justify-content: center;
      width: $majorPointSize;
      height: $majorPointSize;

      // for v-alignment w content, need to create a
      // short upper connector equal to the height of the top negative margin
      &::after {
        position: absolute;
        top: 0;
        left: 50%;

        width: 1px;
        height: $majorPointSize;

        background-color: ui-color(paper-ink-lightest);
        transform: translateX(-1px);

        content: '';
      }

      &-dot {
        position: relative;

        width: $minorPointSize;
        height: $minorPointSize;

        background-color: ui-color(paper-ink-lightest);
        border-radius: 50%;
      }
    }

    &--major {
      display: flex;
      align-items: center;
      justify-content: center;
      width: $majorPointSize;
      height: $majorPointSize;

      color: ui-color(charcoal-ink-darkest);

      border: 1px solid ui-color(paper-ink-lightest);
    }
  }

  &__content {
    padding-top: math.div($ui-spacer, 1.5);
    // when implemented user is free to change/override this
    // as needs for various content types vary
    padding-bottom: $ui-spacer * 2;

    @include ui-from($ui-bp-desktop) {
      padding-bottom: $ui-spacer * 4;
    }
  }

  &__tail {
    position: relative;
    left: -1px;

    width: $tailImageWidth;
    height: $tailImageHeight;

    background: url(../resources/images/elements/dashed-line-arrow.svg) 0 0
      no-repeat;
    background-size: contain;
  }
}