@import (reference) "../variables/neptune-tokens.less";
@import (reference) "../variables/legacy-variables.less";
@import (reference) "./mixins/_logical-properties.less";
@import (reference) "./mixins/_sequence.less";
@import (reference) "./mixins/_text-emphasis";
@import (reference) "./mixins/_text-overflow";
@import (reference) "./core/_typography-utilities.less";

@pip-offset-sm: ((@sequence-step-height / 2) + @sequence-item-spacing-sm);
@pip-offset-md: ((@sequence-step-height / 2) + @sequence-item-spacing-md);
@pip-offset-lg: ((@sequence-step-height / 2) + @sequence-item-spacing-lg);

.sequence {
  .sequence-vertical-spacing(
    @sequence-margin,
    @sequence-item-spacing-sm,
    @sequence-item-spacing-md,
    @pip-offset-sm,
    @pip-offset-md,
    @sequence-step-height,
    @sequence-icon-size
  );
  .sequence-horizontal-spacing(
    @sequence-spacing-horizontal,
    @sequence-pip-size,
    @sequence-icon-size,
    @sequence-icon-size-md,
    @sequence-icon-size-lg
  );

  position: relative;
  .margin(left, (@sequence-spacing-horizontal + 1px));

  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--font-size-14);
  border-color: var(--color-border-neutral);

  @media (min-width: @screen-md-min) {
    .padding(right, @sequence-spacing-horizontal);

    font-size: var(--font-size-16);
  }

  > li {
    display: block;
    line-height: @sequence-step-height;
    position: relative;
    border-color: var(--color-border-neutral);

    > a {
      display: block;
      text-decoration: none;
      font-weight: var(--font-weight-regular);
      color: var(--color-content-accent);
      outline-offset: -1px;

      &:hover,
      &:focus {
        text-decoration: none;
        color: var(--color-content-accent-hover);
      }

      &:active {
        color: var(--color-content-accent-active);
      }
    }

    p {
      margin-bottom: 0;
      padding-bottom: 8px;

      &:last-child {
        padding-bottom: 0;
      }

      .text-max-width();
    }

    h1,
    h2,
    h3,
    h4,
    .h1,
    .h2,
    .h3,
    .h4,
    .btn-toolbar {
      margin-bottom: 16px;
    }

    &::before {
      content: "";
      display: block;
      position: absolute;
      width: @sequence-pip-size;
      height: @sequence-pip-size;
      border-radius: 50%;
      z-index: 2;
      border-width: (@sequence-pip-size / 2);
      border-style: solid;
      border-color: inherit;
      outline: 0;
    }

    &::after {
      content: "";
      position: absolute;
      width: @sequence-line-width;
      height: 100%;
      border-style: solid;
      border-color: inherit;
      outline: 0;
      border-width: 0;
      background-color: var(--color-border-neutral);
      background-size: 200% 200%;
      background-position: 0 0%;
    }
  }

  .sequence-item-no-pip::before {
    display: none;
  }

  > .active {
    > a {
      text-decoration: none;
      color: var(--color-content-primary);
      font-weight: var(--font-weight-semi-bold);

      &:hover,
      &:focus {
        text-decoration: none;
        color: var(--color-content-primary);
      }

      &:active {
        color: var(--color-content-primary);
      }
    }

    &::before {
      border-color: var(--color-content-accent);
    }

    &::after,
    ~ li::after {
      background-color: var(--color-border-neutral);
      background-image: none;
    }

    ~ li::before {
      border-color: var(--color-border-neutral);
    }
  }

  a {
    text-decoration: none;
    font-weight: var(--font-weight-regular);
  }
}

.sequence-top {
  > li:first-child::after {
    top: 0;
  }
}

.sequence-inverse {
  > li {
    border-color: var(--color-border-neutral);

    > a {
      color: @color-navy-content-primary;
    }

    &::after {
      background-color: @color-navy-background-elevated;
    }
  }

  > .active {
    > a {
      color: @color-navy-content-primary;
    }

    .small,
    .body-2,
    .np-text-body-default {
      color: var(--color-content-secondary);
    }

    &::after,
    ~ li::after {
      background-color: @color-navy-background-elevated;
      background-image: none !important;
    }

    ~ li::before {
      border-color: @color-navy-background-elevated;
    }
  }
}

.sequence-variant("info", var(--color-interactive-accent));
.sequence-variant("primary", @color-navy-background-elevated);
.sequence-variant("success", var(--color-interactive-positive));
.sequence-variant("warning", var(--color-interactive-warning));
.sequence-variant("danger", var(--color-interactive-negative));

.sequence-hollow {
  > li::before {
    border-width: @sequence-line-width;
    background-color: var(--color-background-screen);
  }

  > .active {
    &::before {
      border-width: (@sequence-pip-size / 2);  // TODO sequence-line-width?
    }

    ~ li::before {
      background-color: var(--color-background-screen);
    }
  }

  &.sequence-inverse > li::before {
    background-color: @color-navy-background-elevated;
  }
}

.sequence-icon {
  position: absolute;
  display: block;
  .margin(left, (-@sequence-spacing-horizontal - (@sequence-icon-size / 2) + 1px));

  background-color: var(--color-background-screen);
  border-radius: 50%;
  width: @sequence-icon-size;
  height: @sequence-icon-size;
  z-index: 2;
  text-align: center;
  text-decoration: none !important;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-border-neutral);
  top: @sequence-item-spacing-md;
  font-size: var(--font-size-12);

  .icon {
    font-size: var(--font-size-16);
    line-height: (@sequence-icon-size - 1px);
  }

  .sequence-inverse & {
    background-color: @color-navy-background-elevated;
    border-color: @color-navy-content-primary;
  }

  .sequence a & {
    color: var(--color-content-accent);
    border-color: var(--color-interactive-accent);
  }

  .sequence a:hover &,
  .sequence a:focus & {
    color: var(--color-content-accent-hover);
    border-color: var(--color-interactive-accent-hover);
  }
}

.sequence-table {
  display: table;

  > li {
    display: table-row;

    > a {
      position: absolute;
    }

    > .sequence-table-td,
    > .sequence-table-th {
      display: table-cell;
      padding: var(--size-4) var(--size-12);
      .padding(left, 0);

      &:last-child {
        .padding(right, 0);
      }
    }

    > .sequence-table-th {
      color: var(--color-content-primary);
      white-space: nowrap;
    }

    &::before {
      position: initial;
    }

    &::after {
      // sequence-table is not compatible with progress variants, due to webkit
      // ignoring position relative on elements with display: table-row
      display: none;
    }

    .sequence-icon {
      position: initial;
      margin-top: (-@sequence-margin - 1);
    }

    &:first-child {
      .sequence-table-td,
      .sequence-table-th {
        padding-top: (@sequence-margin + 1); // Adding/removing one evens out spaces
      }
    }

    &:last-child {
      .sequence-table-td,
      .sequence-table-th {
        padding-bottom: (@sequence-margin - 1);
      }
    }
  }

  @pip-offset-table: ((@sequence-step-height / 2) + @sequence-margin);
  @space-outside-pips-table: ((@sequence-margin * 2) + @sequence-step-height);
  // Sequence table uses a different approach to the left hand line.
  &::before {
    content: " ";
    width: @sequence-line-width;
    .left(0);

    position: absolute;
    border-width: (@sequence-line-width / 2);
    border-style: solid;
    border-color: inherit;
    height: ~"calc(100% - @{space-outside-pips-table})";
    margin-top: @pip-offset-table;
    display: block;
  }

  &.sequence-top::before {
    height: ~"calc(100% - @{pip-offset-table})";
    margin-top: 0;
  }

  &.sequence-bottom::before {
    height: ~"calc(100% - @{pip-offset-table})";
  }

  &.sequence-top.sequence-bottom::before {
    height: 100%;
  }
}

.sequence-inverse > li > .sequence-table-th,
.sequence-inverse > li > .sequence-table-td {
  color: var(--color-content-secondary);
}

.sequence-icon-md {
  width: @sequence-icon-size-md;
  height: @sequence-icon-size-md;
  line-height: (@sequence-icon-size-md - 2px);
  margin-top: -6px;
  font-size: var(--font-size-14);
}

.sequence-icon-lg {
  width: @sequence-icon-size-lg;
  height: @sequence-icon-size-lg;
  line-height: (@sequence-icon-size-lg - 2px);
  margin-top: -6px;
  font-size: var(--font-size-16);

  .icon {
    font-size: 22px;
    line-height: 35px;
  }
}

.sequence-lg {
  .sequence-vertical-spacing(
    @sequence-margin-lg,
    8px, //@sequence-item-spacing-md,
    @sequence-item-spacing-lg,
    @pip-offset-md,
    @pip-offset-lg,
    @sequence-step-height,
    @sequence-icon-size
  );
  .sequence-horizontal-spacing(
    40px,
    @sequence-pip-size,
    @sequence-icon-size,
    @sequence-icon-size-md,
    @sequence-icon-size-lg
  );

  @media (--screen-md) {
    .sequence-horizontal-spacing(
      @sequence-spacing-horizontal-lg,
      @sequence-pip-size,
      @sequence-icon-size,
      @sequence-icon-size-md,
      @sequence-icon-size-lg
    );
  }
}

@speed-per-item: 0.3s;
@speed-per-pulse: 3s;

.sequence-animate {
  > li::after {
    background-size: 200% 200%;
    animation: @speed-per-item linear 0s both sequence-fill;
  }

  &.sequence-info {
    .sequence-animation-variant("info");
  }

  &.sequence-warning {
    .sequence-animation-variant("warning");
  }

  &.sequence-success {
    .sequence-animation-variant("success");
  }

  &.sequence-danger {
    .sequence-animation-variant("danger");
  }

  .sequence-animation-delays(10);

  > .active ~ li::before,
  > .active ~ li::after {
    animation: none;
  }
}

@keyframes sequence-fill {
  from {
    background-position: 0 100%;
  }

  to {
    background-position: 0 0;
  }
}

@keyframes sequence-pulse-info {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 185, 255, 0.3);
  }

  50% {
    box-shadow: 0 0 0 16px rgba(0, 185, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(0, 185, 255, 0);
  }
}

@keyframes sequence-pulse-warning {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 166, 0, 0.3);
  }

  50% {
    box-shadow: 0 0 0 16px rgba(255, 166, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 166, 0, 0);
  }
}

@keyframes sequence-pulse-success {
  0% {
    box-shadow: 0 0 0 0 rgba(26, 208, 110, 0.3);
  }

  50% {
    box-shadow: 0 0 0 16px rgba(26, 208, 110, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(226, 208, 110, 0);
  }
}

@keyframes sequence-pulse-danger {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 54, 54, 0.3);
  }

  50% {
    box-shadow: 0 0 0 16px rgba(245, 54, 54, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(245, 54, 54, 0);
  }
}