@import "../../../style/mixins";
@import "../../../style/vars";

.timeline-element {
  display: flex;

  .line {
    position: relative;
    border-left: $line-width solid $accent-color;

    &:before {
      content: "";
      @include square($icon-size);
      position: absolute;
      left: calc(-0.5 * #{$icon-size} - (1.5 * #{$line-width}));
      border: $line-width solid $accent-color;
      border-radius: 100%;
      background: $background;
    }

    .date {
      @include insignificant-font();
    }
  }

  @media (min-width: $breakpoint-width) {
    &:not(:first-of-type) .card {
      margin-top: $large-margin;
    }

    .line {
      &:before {
        top: calc(33% - #{$icon-size} / 2);
      }

      .date {
        position: relative;
        top: calc(33% + #{$icon-size} / 2 + 1ch);
        transform: rotate(30deg);
        margin: 0 $normal-margin 0 calc(#{$line-width} + 1ex);
        width: 100px;
      }
    }
  }

  @media (max-width: $breakpoint-width) {
    flex-direction: column;
    align-items: center;

    &:before {
      top: calc(50% - #{$icon-size} / 2);
    }

    .line {
      @include center-children();
      height: 150px;
      width: 50%;

      .date {
        margin-left: calc(#{$icon-size} / 2 + #{$small-margin});
        width: 200px;
      }
    }
  }

  .card {
    @include card();
    overflow: hidden;

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

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

    .image-container {
      font-size: 0;
      box-shadow: inset $shadow1, inset $shadow2;
      pointer-events: none;
      img {
        pointer-events: all;
        cursor: pointer;
        position: relative;
        z-index: -2;
      }
    }

    .description {
      font-style: italic;
    }

    .more {
      overflow: hidden;
      height: 0;
      margin-top: 0;
      transition: height $long-transition-time;
    }

    .buttons {
      position: relative;
      margin-top: $small-margin;

      * {
        transition: opacity $long-transition-time;
      }

      .show-more {
        opacity: 1;
      }

      .show-less {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }
  }
}