@use 'sass:math';

@import "_variables";

$timelineLeft: 100px;
$timelineLine: 4px;
$timelineDot: 24px;
$timelinePadding: 48px;

.timeline {
  .toggles input {
    -webkit-transform: translateZ(0);
  }
  ol {
    list-style-type: none;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      top: math.div($timelineDot,2);
      left: -$timelineLine*2;
      width: $timelineLine;
      height: 100%;
      background: linear-gradient(var(--page-color) 0, var(--text-color) 18px, var(--text-color) 100%);
      // border-left: solid $timelineLine $text-color;
    }
    margin-left: $timelineLeft;
    padding-left: $timelinePadding;

    li {
      position: relative;
      width: 100%;

      time {
        position: absolute;
        width: $timelineLeft - $timelinePadding;
        left: -$timelineLeft - $timelineLine - $timelinePadding;

        text-align: right;
        padding-right: $timelinePadding;

        opacity: 0.0;
        transition: opacity .5s ease-in;
        &.first {
          opacity: 1.0;
        }
      }

      &:before {
        content: "";
        display: block;

        position: absolute;
        width: $timelineDot - ($timelineLine * 2);
        height: $timelineDot - ($timelineLine * 2);
        left: -$timelinePadding - math.div($timelineLine, 2) - math.div($timelineDot, 2);
        margin-top: -(math.div($timelineDot, 2)); // this could be improved to align with text rather than line
        top: 50%;

        border: $timelineLine solid var(--text-color);
        border-radius: 50%;
        background-color: var(--page-color);
        transition: background-color .5s ease-in;
      }

      &:hover:before {
        background-color: var(--text-color);
        transition: background-color .5s ease-out;
      }

      p {
        display: inline;
      }

      .map-link {
        opacity: 0.0;
        transition: opacity .5s ease-in;
      }

      &:hover .map-link {
        opacity: 1.0;
        transition: opacity .5s ease-out;
      }

      a {
        text-decoration: none;
        display: inline;

        // .map-preview {
        //   position: absolute;
        //   right: 0px;

        //   opacity: 0.0;
        // }
        // &:hover .map-preview {
        //   opacity: 1.0;
        // }
      }
    }
  }
  // reverse gets the extra line at top
  &.reverse ol::before {
    top: -(math.div($timelineDot, 2));
  }
}
