@import "../../variables-layout";

@import "../../../_vendor/node_modules/bootstrap/scss/functions";
@import "../../../_vendor/node_modules/bootstrap/scss/variables";
@import "../../../_vendor/node_modules/bootstrap/scss/mixins";

@import "../../scss-variables";
@import "../../_theme/variables-layout";

html body {
  .ce_rsce_timeline {
    .ce--timeline {
      position: relative;
      margin-top: rfs-fluid-value(4rem);

      @include media-breakpoint-up(md) {
        &:before {
          content: "";
          width: 1px;
          height: 100%;
          left: 50%;
          top: 0;
          position: absolute;
          background-color: var(--bs-gray-500);
        }
      }

      .year--wrapper {
        > div {
          position: relative;

          @include media-breakpoint-up(md) {
            &:after {
              content: "";
              height: 1px;
              width: 50px;
              position: absolute;
              top: 35px;
              display: block;
              background-color: var(--bs-gray-500);
            }

            &:before {
              content: "";
              display: block;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background-color: var(--bs-primary);
              border: 3px solid var(--bs-white);
              position: absolute;
              top: 25px;
              z-index: 3;
            }
          }
        }

        &:first-child {
          .year--content {
            //padding-top: 0px;
          }
        }

        &:last-child {
          .year--content {
            padding-bottom: 0px;
          }
        }

        &:nth-child(even) {
          text-align: right;

          > div {
            &:after {
              right: 0;
            }

            &:before {
              right: -10px;
            }

            .year--content {
              margin: 0 0 0 auto;

              @include media-breakpoint-up(md) {
                padding-right: 50px;
              }
            }
          }
        }

        &:nth-child(odd) {
          flex-direction: row-reverse;

          > div {
            &:after {
              left: 0;
            }

            &:before {
              left: -10px;
            }

            .year--content {
              @include media-breakpoint-up(md) {
                padding-left: 50px;
              }
            }
          }
        }

        .year--content {
          position: relative;
          z-index: 3;
          padding-top: 20px;
          padding-bottom: 20px;

          @include media-breakpoint-up(md) {
            max-width: 300px;
          }
        }
      }
    }
  }
}