timeline.css

@import "fyndiq-styles-colors/colors.css";

.event {
  position: relative;
  display: flex;
  align-items: center;

  & + .event {
    margin-top: 15px;

    &:before {
      content: " ";
      display: block;
      position: absolute;
      height: 17px;
      width: 1px;
      background: var(--color-border);
      top: -16px;
      left: 16px;
    }
  }
}

@keyframes iconAppear {
  from {
    transform: scale(0);
  }

  to {
    transform: scale(1);
  }
}

.icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 40px;
  padding: 5px;
  margin-right: 8px;
  animation: iconAppear .3s;

  & svg {
    width: 18px;
    height: 18px;
    margin-right: 0;
  }
}

/* color themes */

.timeline_type_white {
  & .event:before {
    background-color: var(--color-border);
  }

  & .icon {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
  }
}

.timeline_type_black {
  & .event:before {
    background-color: var(--color-black);
  }

  & .icon {
    background-color: var(--color-black);

    & svg {
      fill: var(--color-white);
      stroke: var(--color-white);
    }
  }
}