@use '../../../style/include' as *;

@mixin q-dependent-line-container($vars, $q) {
  .line {
    height: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);

    &:before {
      height: calc(100% - #{$q} - #{map_get($vars, $icon-size)} / 2);
    }
    &:after {
      top: calc(#{$q} - #{map_get($vars, $icon-size)} / 2);
    }
  }
  .date {
    top: calc(#{$q} - 0.5ch);
  }
}

@include responsive() using ($vars) {
  section.timeline-element {
    display: flex;
    width: map_get($vars, $body-width);
    margin: auto;

    .line-container {
      position: relative;
      @include q-dependent-line-container($vars, 33%);
      min-width: 160px;

      .line {
        border-left: map_get($vars, $line-width) solid
          map_get($vars, $accent-color);

        &:before,
        &:after {
          content: '';
          position: absolute;
        }

        &:before {
          left: 0;
          bottom: 0;
          border-left: map_get($vars, $line-width) solid
            map_get($vars, $accent-color);
        }

        &:after {
          @include square(map_get($vars, $icon-size));
          border-radius: 1000px;
          border: map_get($vars, $line-width) solid
            map_get($vars, $accent-color);
          left: -1 * map_get($vars, $icon-size) / 2 +
            map_get($vars, $line-width) / 2;
        }
      }

      .date {
        @include special-text-font($vars);
        position: absolute;
        transform-origin: left center;
        transform: rotate(30deg)
          translateX(map_get($vars, $icon-size) / 2 + 6px) translateY(-10%);

        padding-right: map_get($vars, $normal-margin);
      }
    }

    @include on-large-screen {
      &:not(:first-of-type) .card {
        margin-top: map_get($vars, $large-margin);
      }
    }

    @include on-small-screen {
      flex-direction: column;
      align-items: center;

      .line-container {
        @include q-dependent-line-container($vars, 50%);
        height: 150px;
        width: 50%;

        .date {
          transform: translateX(map_get($vars, $icon-size) / 2 + 12px)
            translateY(-10%);
        }
      }
    }

    .card {
      @include card-base($vars);
      border-radius: map_get($vars, $border-radius);
      background-color: map_get($vars, $card-color);

      & > *:not(:first-child) {
        margin-top: map_get($vars, $line-height);
      }

      .content {
        margin-top: 0;
      }

      h2 {
        @include sub-title-font($vars);
      }

      & > p {
        font-style: italic;
        text-align: center;
      }

      .more {
        overflow: hidden;
        height: 0;
        transition: height map_get($vars, $transition-time);
      }

      .buttons {
        position: relative;
        margin-top: map_get($vars, $line-height);

        .show-more,
        .show-less {
          transition: opacity map_get($vars, $transition-time);
        }

        .show-more {
          opacity: 1;
        }

        .show-less {
          @include absolute-center();
          opacity: 0;
          visibility: hidden;
        }
      }
    }
  }
}