/** This is a modified version of the `timelinet.scss` stylesheet from
Neoteroi Mkdocs timeline extension: https://github.com/Neoteroi/mkdocs-plugins/blob/main/styles/timeline.scss **/

/** Timeline CSS **/

/* Theme-aware timeline tokens */
:root,
[data-md-color-scheme="custom-light"] {
  --nt-timeline-line-color: var(--color-text-primary);
  --nt-timeline-line-color-strong: color-mix(
    in srgb,
    var(--nt-timeline-line-color) 80%,
    transparent
  );
  --nt-timeline-line-color-soft: color-mix(
    in srgb,
    var(--nt-timeline-line-color) 35%,
    transparent
  );

  --nt-timeline-content-divider: var(--color-border-strong);
  --nt-timeline-dot-bg: var(--color-surface);
  --nt-timeline-dot-border: var(--color-text-primary);
  --nt-timeline-icon-color: var(--color-text-primary);
}

[data-md-color-scheme="custom-dark"] {
  --nt-timeline-line-color: var(--color-text-primary);
  --nt-timeline-line-color-strong: color-mix(
    in srgb,
    var(--nt-timeline-line-color) 80%,
    transparent
  );
  --nt-timeline-line-color-soft: color-mix(
    in srgb,
    var(--nt-timeline-line-color) 35%,
    transparent
  );

  --nt-timeline-content-divider: var(--color-border-strong);
  --nt-timeline-dot-bg: var(--color-surface);
  --nt-timeline-dot-border: var(--nt-timeline-line-color);
  --nt-timeline-icon-color: var(--color-text-primary);
}

/* displays if timeline doesn't render properly 
(bad file path to JSON, etc)*/
.nt-error {
  border: 2px dashed darkred;
  padding: 0 1rem;
  background: #faf9ba;
  color: darkred;
}

/* main timeline element*/
.nt-timeline {
  /* top margin entire element */
  margin-top: 30px;
  /* adjust to control width of total timeline element*/
  max-width: 80%;

  /* heading name for each item on timeline */
  .nt-timeline-title {
    font-size: 0.9rem;
    margin-top: 0;
    color: var(--color-text-primary);
    font-family: var(--header-font-family);
    font-weight: 600;
  }

  /** content blocks for each timeline item**/
  /** border between timeline items **/
  .nt-timeline-content {
    border-bottom: 2px dashed var(--color-border-strong);
    padding-bottom: 1.2rem;
  }
  
    &.horizontal {
      .nt-timeline-items {
        flex-direction: row;
        overflow-x: scroll;

        > div {
          min-width: 400px;
          margin-right: 50px;
        }
      }

      &.reverse {
        .nt-timeline-items {
          flex-direction: row-reverse;
        }
      }
      /* base gradient set up*/
      &.center {
        .nt-timeline-before {
          background-image: linear-gradient(
            rgba(255, 38, 112, 1) 0%,
            rgba(255, 38, 112, 1) 100%
          );
          background-repeat: no-repeat;
          background-size: 100% 2px;
          background-position: 0 center;
        }

        .nt-timeline-after {
          background-image: linear-gradient(
            180deg,
            rgba(110, 115, 145, 0) 0%,
            rgba(110, 115, 145, 0) 100%
          );
          background-repeat: no-repeat;
          background-size: 100% 2px;
          background-position: 0 center;
        }

        .nt-timeline-items {
          background-image: radial-gradient(
            circle,
            rgba(255, 38, 112, 1) 0%,
            rgba(110, 115, 145, 0) 100%
          );
          background-repeat: no-repeat;
          background-size: 100% 2px;
          background-position: 0 center;
        }
      }

      .nt-timeline-dot {
        left: 50%;

        &:not(.bigger) {
          top: calc(50% - 4px);
        }

        &.bigger {
          top: calc(50% - 15px);
        }
      }
    }
  
    &.vertical {
      .nt-timeline-items {
        flex-direction: column;
      }

      &.reverse {
        .nt-timeline-items {
          flex-direction: column-reverse;
        }
      }

      &.left {
        padding-left: 20px;

        .nt-timeline-item {
          padding-left: 70px;
        }

        /* set gradient for left aligned timeline*/
        /* px here control left margin/width of timeline */
        .nt-timeline-before {
          background: linear-gradient(
              var(--nt-timeline-line-color-soft) 0%,
              var(--nt-timeline-line-color-strong) 100%
            )
            no-repeat 30px/2px 100%;
        }

        .nt-timeline-after {
          background: linear-gradient(transparent 0%, transparent 100%) no-repeat
            30px/2px 100%;
          display: none;
        }

        .nt-timeline-items {
          background: linear-gradient(
              var(--nt-timeline-line-color-strong) 0%,
              var(--nt-timeline-line-color-soft) 50%,
              transparent 100%
            )
            no-repeat 30px/2px 100%;
        }

        .nt-timeline-dot {
          left: 21px;
          top: 0px;

          &.bigger {
            top: 0px;
            left: 10px;
            background: var(--md-default-bg-color);
            border: 2px solid var(--color-text-primary);
          }
        }
      }
    }
  }

  /* sets height, padding for each item on timeline */
  .nt-timeline-items {
    display: flex;
    position: relative;

    > div {
      min-height: 100px;
      padding-top: 2px;
      padding-bottom: 8px;
    }
  }

  /* set height for timeline gradient above the first item */
  .nt-timeline-before {
    content: "";
    height: 15px;
  }

  .nt-timeline-item {
    position: relative;
  }

  /* circles around icons*/

  .nt-timeline-dot {
    position: relative;
    width: 20px;
    height: 20px;

    border-radius: 100%;
    background-color: var(--nt-timeline-dot-bg);
    position: absolute;
    top: 0px;
    z-index: 2;

    display: flex;
    justify-content: center;
    align-items: center;

    /* border around each icon */
    border: 2px solid var(--nt-timeline-dot-border);

    &:not(.bigger) {
      .icon {
        font-size: 10px;
      }
    }

    &.bigger {
      width: 40px;
      height: 40px;
      padding: 3px;
    }

    .icon {
      color: var(--color-text-primary);
      position: relative;
      top: 2px;
    }
  }

  /* Fix for webkit (Chrome, Safari) */
  @supports not (-moz-appearance: none) {
    /* The extension dev created this and the following note */
    /*
    This fix is necessary, for some reason, to render the timeline properly
    inside `details` elements used by pymdownx. Firefox doesn't need this fix,
    it renders elements properly.
    */
    details {
      .nt-timeline.vertical.center.alternate
        .nt-timeline-item:nth-child(odd)
        .nt-timeline-sub-title,
      .nt-timeline.vertical.center:not(.alternate)
        .nt-timeline-item
        .nt-timeline-sub-title {
        left: -40px;
      }

      .nt-timeline.vertical.center.alternate
        .nt-timeline-item:nth-child(even)
        .nt-timeline-sub-title {
        right: -40px;
      }

      .nt-timeline.vertical.center .nt-timeline-dot {
        left: calc(50% - 12px);
      }

      .nt-timeline-dot.bigger {
        font-size: 1rem !important;
      }
    }
  }