@transferwise/components 46.130.2 → 46.131.0

package/build/styles/css/sequences.css

@@ -0,0 +1,855 @@
+.sequence {
+  padding-left: 24px;
+  position: relative;
+  margin-left: 25px;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+  border-color: rgba(0,0,0,0.10196);
+  border-color: var(--color-border-neutral);
+}
+.sequence > li {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.sequence > li:first-child {
+  margin-top: 16px;
+}
+.sequence > li:last-child {
+  margin-bottom: 16px;
+}
+@media (min-width: 768px) {
+  .sequence > li {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+}
+.sequence > li::before {
+  margin-top: 8px;
+}
+.sequence > li::after {
+  top: 16px;
+}
+.sequence > li:first-child::after {
+  height: 100%;
+}
+.sequence > li:last-child::after {
+  height: 0;
+}
+.sequence.sequence-top > li:first-child {
+  padding-top: 20px;
+  margin-top: 0;
+}
+.sequence.sequence-top > li:first-child::after {
+  height: calc(100% + 16px);
+}
+.sequence.sequence-bottom > li:last-child {
+  padding-bottom: 20px;
+  margin-bottom: 0;
+}
+.sequence.sequence-bottom > li:last-child::after {
+  height: calc(100% - 16px);
+}
+.sequence.sequence-top.sequence-bottom > li:first-child:last-child::after {
+  height: 100%;
+}
+.sequence .sequence-icon {
+  top: 2px;
+}
+@media (min-width: 768px) {
+  .sequence .sequence-icon {
+    top: 4px;
+  }
+}
+.sequence.sequence-top > li:first-child .sequence-icon {
+  top: 20px;
+}
+[dir="rtl"] .sequence {
+  padding-right: 24px;
+  padding-left: 0;
+  padding-left: initial;
+}
+.sequence > li::before {
+  margin-left: -27px;
+}
+[dir="rtl"] .sequence > li::before {
+  margin-right: -27px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence > li::after {
+  left: -24px;
+}
+[dir="rtl"] .sequence > li::after {
+  right: -24px;
+  left: auto;
+  left: initial;
+}
+.sequence .sequence-icon {
+  margin-left: -35px;
+}
+[dir="rtl"] .sequence .sequence-icon {
+  margin-right: -35px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence .sequence-icon-md {
+  margin-left: -39px;
+}
+[dir="rtl"] .sequence .sequence-icon-md {
+  margin-right: -39px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence .sequence-icon-lg {
+  margin-left: -43px;
+}
+[dir="rtl"] .sequence .sequence-icon-lg {
+  margin-right: -43px;
+  margin-left: 0;
+  margin-left: initial;
+}
+[dir="rtl"] .sequence {
+  margin-right: 25px;
+  margin-left: 0;
+  margin-left: initial;
+}
+@media (min-width: 768px) {
+  .sequence {
+    padding-right: 24px;
+    font-size: 1rem;
+    font-size: var(--font-size-16);
+  }
+  [dir="rtl"] .sequence {
+    padding-left: 24px;
+    padding-right: 0;
+    padding-right: initial;
+  }
+}
+.sequence > li {
+  display: block;
+  line-height: 24px;
+  position: relative;
+  border-color: rgba(0,0,0,0.10196);
+  border-color: var(--color-border-neutral);
+}
+.sequence > li > a {
+  display: block;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+  color: #0097c7;
+  color: var(--color-content-accent);
+  outline-offset: -1px;
+}
+.sequence > li > a:hover,
+.sequence > li > a:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #0084b3;
+  color: var(--color-content-accent-hover);
+}
+.sequence > li > a:active {
+  color: #0077a5;
+  color: var(--color-content-accent-active);
+}
+.sequence > li p {
+  margin-bottom: 0;
+  padding-bottom: 8px;
+  max-width: 600px;
+}
+.sequence > li p:last-child {
+  padding-bottom: 0;
+}
+.sequence > li h1,
+.sequence > li h2,
+.sequence > li h3,
+.sequence > li h4,
+.sequence > li .h1,
+.sequence > li .h2,
+.sequence > li .h3,
+.sequence > li .h4,
+.sequence > li .btn-toolbar {
+  margin-bottom: 16px;
+}
+.sequence > li::before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  z-index: 2;
+  border-width: 4px;
+  border-style: solid;
+  border-color: inherit;
+  outline: 0;
+}
+.sequence > li::after {
+  content: "";
+  position: absolute;
+  width: 2px;
+  height: 100%;
+  border-style: solid;
+  border-color: inherit;
+  outline: 0;
+  border-width: 0;
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
+  background-size: 200% 200%;
+  background-position: 0 0%;
+}
+.sequence .sequence-item-no-pip::before {
+  display: none;
+}
+.sequence > .active > a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #37517e;
+  color: var(--color-content-primary);
+  font-weight: 600;
+  font-weight: var(--font-weight-semi-bold);
+}
+.sequence > .active > a:hover,
+.sequence > .active > a:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.sequence > .active > a:active {
+  color: #37517e;
+  color: var(--color-content-primary);
+}
+.sequence > .active::before {
+  border-color: #0097c7;
+  border-color: var(--color-content-accent);
+}
+.sequence > .active::after,
+.sequence > .active ~ li::after {
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
+  background-image: none;
+}
+.sequence > .active ~ li::before {
+  border-color: rgba(0,0,0,0.10196);
+  border-color: var(--color-border-neutral);
+}
+.sequence a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: 400;
+  font-weight: var(--font-weight-regular);
+}
+.sequence-top > li:first-child::after {
+  top: 0;
+}
+.sequence-inverse > li {
+  border-color: rgba(0,0,0,0.10196);
+  border-color: var(--color-border-neutral);
+}
+.sequence-inverse > li > a {
+  color: #ffffff;
+}
+.sequence-inverse > li::after {
+  background-color: #37517e;
+}
+.sequence-inverse > .active > a {
+  color: #ffffff;
+}
+.sequence-inverse > .active .small,
+.sequence-inverse > .active .body-2,
+.sequence-inverse > .active .np-text-body-default {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.sequence-inverse > .active::after,
+.sequence-inverse > .active ~ li::after {
+  background-color: #37517e;
+  background-image: none !important;
+}
+.sequence-inverse > .active ~ li::before {
+  border-color: #37517e;
+}
+.sequence-info > li {
+  border-color: #00a2dd;
+  border-color: var(--color-interactive-accent);
+}
+.sequence-info > li::after {
+  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
+}
+.sequence-info.sequence-inverse > li::after {
+  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+}
+.sequence-info > .active::before {
+  border-color: #00a2dd;
+  border-color: var(--color-interactive-accent);
+  background-color: #00a2dd;
+  background-color: var(--color-interactive-accent);
+}
+@keyframes sequence-pip-info {
+  from {
+    border-color: rgba(255,255,255,0.10196);
+  }
+  to {
+    border-color: #00a2dd;
+    border-color: var(--color-interactive-accent);
+  }
+}
+.sequence-primary > li {
+  border-color: #37517e;
+}
+.sequence-primary > li::after {
+  background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
+  background-image: linear-gradient(#37517e 0, #37517e 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
+}
+.sequence-primary.sequence-inverse > li::after {
+  background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+}
+.sequence-primary > .active::before {
+  border-color: #37517e;
+  background-color: #37517e;
+}
+@keyframes sequence-pip-primary {
+  from {
+    border-color: rgba(255,255,255,0.10196);
+  }
+  to {
+    border-color: #37517e;
+  }
+}
+.sequence-success > li {
+  border-color: #2ead4b;
+  border-color: var(--color-interactive-positive);
+}
+.sequence-success > li::after {
+  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
+}
+.sequence-success.sequence-inverse > li::after {
+  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+}
+.sequence-success > .active::before {
+  border-color: #2ead4b;
+  border-color: var(--color-interactive-positive);
+  background-color: #2ead4b;
+  background-color: var(--color-interactive-positive);
+}
+@keyframes sequence-pip-success {
+  from {
+    border-color: rgba(255,255,255,0.10196);
+  }
+  to {
+    border-color: #2ead4b;
+    border-color: var(--color-interactive-positive);
+  }
+}
+.sequence-warning > li {
+  border-color: #df8700;
+  border-color: var(--color-interactive-warning);
+}
+.sequence-warning > li::after {
+  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
+}
+.sequence-warning.sequence-inverse > li::after {
+  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+}
+.sequence-warning > .active::before {
+  border-color: #df8700;
+  border-color: var(--color-interactive-warning);
+  background-color: #df8700;
+  background-color: var(--color-interactive-warning);
+}
+@keyframes sequence-pip-warning {
+  from {
+    border-color: rgba(255,255,255,0.10196);
+  }
+  to {
+    border-color: #df8700;
+    border-color: var(--color-interactive-warning);
+  }
+}
+.sequence-danger > li {
+  border-color: #e74848;
+  border-color: var(--color-interactive-negative);
+}
+.sequence-danger > li::after {
+  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
+}
+.sequence-danger.sequence-inverse > li::after {
+  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+  background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
+}
+.sequence-danger > .active::before {
+  border-color: #e74848;
+  border-color: var(--color-interactive-negative);
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}
+@keyframes sequence-pip-danger {
+  from {
+    border-color: rgba(255,255,255,0.10196);
+  }
+  to {
+    border-color: #e74848;
+    border-color: var(--color-interactive-negative);
+  }
+}
+.sequence-hollow > li::before {
+  border-width: 2px;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
+.sequence-hollow > .active::before {
+  border-width: 4px;
+}
+.sequence-hollow > .active ~ li::before {
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+}
+.sequence-hollow.sequence-inverse > li::before {
+  background-color: #37517e;
+}
+.sequence-icon {
+  position: absolute;
+  display: block;
+  margin-left: -35px;
+  background-color: #ffffff;
+  background-color: var(--color-background-screen);
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  z-index: 2;
+  text-align: center;
+  -webkit-text-decoration: none !important;
+  text-decoration: none !important;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0,0,0,0.10196);
+  border-color: var(--color-border-neutral);
+  top: 4px;
+  font-size: 0.75rem;
+  font-size: var(--font-size-12);
+}
+[dir="rtl"] .sequence-icon {
+  margin-right: -35px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence-icon .icon {
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+  line-height: 23px;
+}
+.sequence-inverse .sequence-icon {
+  background-color: #37517e;
+  border-color: #ffffff;
+}
+.sequence a .sequence-icon {
+  color: #0097c7;
+  color: var(--color-content-accent);
+  border-color: #00a2dd;
+  border-color: var(--color-interactive-accent);
+}
+.sequence a:hover .sequence-icon,
+.sequence a:focus .sequence-icon {
+  color: #0084b3;
+  color: var(--color-content-accent-hover);
+  border-color: #008fc9;
+  border-color: var(--color-interactive-accent-hover);
+}
+.sequence-table {
+  display: table;
+}
+.sequence-table > li {
+  display: table-row;
+}
+.sequence-table > li > a {
+  position: absolute;
+}
+.sequence-table > li > .sequence-table-td,
+.sequence-table > li > .sequence-table-th {
+  display: table-cell;
+  padding: 4px 12px;
+  padding: var(--size-4) var(--size-12);
+  padding-left: 0;
+}
+[dir="rtl"] .sequence-table > li > .sequence-table-td,
+[dir="rtl"] .sequence-table > li > .sequence-table-th {
+  padding-right: 0;
+  padding-left: 0;
+  padding-left: initial;
+}
+.sequence-table > li > .sequence-table-td:last-child,
+.sequence-table > li > .sequence-table-th:last-child {
+  padding-right: 0;
+}
+[dir="rtl"] .sequence-table > li > .sequence-table-td:last-child,
+[dir="rtl"] .sequence-table > li > .sequence-table-th:last-child {
+  padding-left: 0;
+  padding-right: 0;
+  padding-right: initial;
+}
+.sequence-table > li > .sequence-table-th {
+  color: #37517e;
+  color: var(--color-content-primary);
+  white-space: nowrap;
+}
+.sequence-table > li::before {
+  position: static;
+  position: initial;
+}
+.sequence-table > li::after {
+  display: none;
+}
+.sequence-table > li .sequence-icon {
+  position: static;
+  position: initial;
+  margin-top: -17px;
+}
+.sequence-table > li:first-child .sequence-table-td,
+.sequence-table > li:first-child .sequence-table-th {
+  padding-top: 17px;
+}
+.sequence-table > li:last-child .sequence-table-td,
+.sequence-table > li:last-child .sequence-table-th {
+  padding-bottom: 15px;
+}
+.sequence-table::before {
+  content: " ";
+  width: 2px;
+  left: 0;
+  position: absolute;
+  border-width: 1px;
+  border-style: solid;
+  border-color: inherit;
+  height: calc(100% - 56px);
+  margin-top: 28px;
+  display: block;
+}
+[dir="rtl"] .sequence-table::before {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+.sequence-table.sequence-top::before {
+  height: calc(100% - 28px);
+  margin-top: 0;
+}
+.sequence-table.sequence-bottom::before {
+  height: calc(100% - 28px);
+}
+.sequence-table.sequence-top.sequence-bottom::before {
+  height: 100%;
+}
+.sequence-inverse > li > .sequence-table-th,
+.sequence-inverse > li > .sequence-table-td {
+  color: #5d7079;
+  color: var(--color-content-secondary);
+}
+.sequence-icon-md {
+  width: 32px;
+  height: 32px;
+  line-height: 30px;
+  margin-top: -6px;
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
+}
+.sequence-icon-lg {
+  width: 40px;
+  height: 40px;
+  line-height: 38px;
+  margin-top: -6px;
+  font-size: 1rem;
+  font-size: var(--font-size-16);
+}
+.sequence-icon-lg .icon {
+  font-size: 22px;
+  line-height: 35px;
+}
+.sequence-lg {
+  padding-left: 40px;
+}
+.sequence-lg > li {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.sequence-lg > li:first-child {
+  margin-top: 24px;
+}
+.sequence-lg > li:last-child {
+  margin-bottom: 24px;
+}
+@media (min-width: 768px) {
+  .sequence-lg > li {
+    padding-top: 8px;
+    padding-bottom: 8px;
+  }
+}
+.sequence-lg > li::before {
+  margin-top: 8px;
+}
+.sequence-lg > li::after {
+  top: 20px;
+}
+.sequence-lg > li:first-child::after {
+  height: 100%;
+}
+.sequence-lg > li:last-child::after {
+  height: 0;
+}
+.sequence-lg.sequence-top > li:first-child {
+  padding-top: 32px;
+  margin-top: 0;
+}
+.sequence-lg.sequence-top > li:first-child::after {
+  height: calc(100% + 20px);
+}
+.sequence-lg.sequence-bottom > li:last-child {
+  padding-bottom: 32px;
+  margin-bottom: 0;
+}
+.sequence-lg.sequence-bottom > li:last-child::after {
+  height: calc(100% - 20px);
+}
+.sequence-lg.sequence-top.sequence-bottom > li:first-child:last-child::after {
+  height: 100%;
+}
+.sequence-lg .sequence-icon {
+  top: 8px;
+}
+@media (min-width: 768px) {
+  .sequence-lg .sequence-icon {
+    top: 8px;
+  }
+}
+.sequence-lg.sequence-top > li:first-child .sequence-icon {
+  top: 32px;
+}
+[dir="rtl"] .sequence-lg {
+  padding-right: 40px;
+  padding-left: 0;
+  padding-left: initial;
+}
+.sequence-lg > li::before {
+  margin-left: -43px;
+}
+[dir="rtl"] .sequence-lg > li::before {
+  margin-right: -43px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence-lg > li::after {
+  left: -40px;
+}
+[dir="rtl"] .sequence-lg > li::after {
+  right: -40px;
+  left: auto;
+  left: initial;
+}
+.sequence-lg .sequence-icon {
+  margin-left: -51px;
+}
+[dir="rtl"] .sequence-lg .sequence-icon {
+  margin-right: -51px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence-lg .sequence-icon-md {
+  margin-left: -55px;
+}
+[dir="rtl"] .sequence-lg .sequence-icon-md {
+  margin-right: -55px;
+  margin-left: 0;
+  margin-left: initial;
+}
+.sequence-lg .sequence-icon-lg {
+  margin-left: -59px;
+}
+[dir="rtl"] .sequence-lg .sequence-icon-lg {
+  margin-right: -59px;
+  margin-left: 0;
+  margin-left: initial;
+}
+@media (min-width: 768px) {
+  .sequence-lg {
+    padding-left: 48px;
+  }
+  [dir="rtl"] .sequence-lg {
+    padding-right: 48px;
+    padding-left: 0;
+    padding-left: initial;
+  }
+  .sequence-lg > li::before {
+    margin-left: -51px;
+  }
+  [dir="rtl"] .sequence-lg > li::before {
+    margin-right: -51px;
+    margin-left: 0;
+    margin-left: initial;
+  }
+  .sequence-lg > li::after {
+    left: -48px;
+  }
+  [dir="rtl"] .sequence-lg > li::after {
+    right: -48px;
+    left: auto;
+    left: initial;
+  }
+  .sequence-lg .sequence-icon {
+    margin-left: -59px;
+  }
+  [dir="rtl"] .sequence-lg .sequence-icon {
+    margin-right: -59px;
+    margin-left: 0;
+    margin-left: initial;
+  }
+  .sequence-lg .sequence-icon-md {
+    margin-left: -63px;
+  }
+  [dir="rtl"] .sequence-lg .sequence-icon-md {
+    margin-right: -63px;
+    margin-left: 0;
+    margin-left: initial;
+  }
+  .sequence-lg .sequence-icon-lg {
+    margin-left: -67px;
+  }
+  [dir="rtl"] .sequence-lg .sequence-icon-lg {
+    margin-right: -67px;
+    margin-left: 0;
+    margin-left: initial;
+  }
+}
+.sequence-animate > li::after {
+  background-size: 200% 200%;
+  animation: 0.3s linear 0s both sequence-fill;
+}
+.sequence-animate.sequence-info > li::before {
+  animation: 0.3s linear 0.3s both sequence-pip-info, 3s linear 0.3s forwards sequence-pulse-info;
+}
+.sequence-animate.sequence-info > .active::before {
+  animation: 0.3s linear 0.3s both sequence-pip-info, 3s linear 0.3s infinite sequence-pulse-info;
+}
+.sequence-animate.sequence-warning > li::before {
+  animation: 0.3s linear 0.3s both sequence-pip-warning, 3s linear 0.3s forwards sequence-pulse-warning;
+}
+.sequence-animate.sequence-warning > .active::before {
+  animation: 0.3s linear 0.3s both sequence-pip-warning, 3s linear 0.3s infinite sequence-pulse-warning;
+}
+.sequence-animate.sequence-success > li::before {
+  animation: 0.3s linear 0.3s both sequence-pip-success, 3s linear 0.3s forwards sequence-pulse-success;
+}
+.sequence-animate.sequence-success > .active::before {
+  animation: 0.3s linear 0.3s both sequence-pip-success, 3s linear 0.3s infinite sequence-pulse-success;
+}
+.sequence-animate.sequence-danger > li::before {
+  animation: 0.3s linear 0.3s both sequence-pip-danger, 3s linear 0.3s forwards sequence-pulse-danger;
+}
+.sequence-animate.sequence-danger > .active::before {
+  animation: 0.3s linear 0.3s both sequence-pip-danger, 3s linear 0.3s infinite sequence-pulse-danger;
+}
+.sequence-animate > li:nth-child(1):before,
+.sequence-animate > li:nth-child(1):after {
+  animation-delay: 0.3s !important;
+}
+.sequence-animate > li:nth-child(2):before,
+.sequence-animate > li:nth-child(2):after {
+  animation-delay: 0.6s !important;
+}
+.sequence-animate > li:nth-child(3):before,
+.sequence-animate > li:nth-child(3):after {
+  animation-delay: 0.9s !important;
+}
+.sequence-animate > li:nth-child(4):before,
+.sequence-animate > li:nth-child(4):after {
+  animation-delay: 1.2s !important;
+}
+.sequence-animate > li:nth-child(5):before,
+.sequence-animate > li:nth-child(5):after {
+  animation-delay: 1.5s !important;
+}
+.sequence-animate > li:nth-child(6):before,
+.sequence-animate > li:nth-child(6):after {
+  animation-delay: 1.8s !important;
+}
+.sequence-animate > li:nth-child(7):before,
+.sequence-animate > li:nth-child(7):after {
+  animation-delay: 2.1s !important;
+}
+.sequence-animate > li:nth-child(8):before,
+.sequence-animate > li:nth-child(8):after {
+  animation-delay: 2.4s !important;
+}
+.sequence-animate > li:nth-child(9):before,
+.sequence-animate > li:nth-child(9):after {
+  animation-delay: 2.7s !important;
+}
+.sequence-animate > li:nth-child(10):before,
+.sequence-animate > li:nth-child(10):after {
+  animation-delay: 3s !important;
+}
+.sequence-animate > .active ~ li::before,
+.sequence-animate > .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);
+  }
+}