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

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

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

.timeline-element {
  display: flex;
  width: var(--body-width);
  margin: auto;

  .line-container {
    position: relative;
    @include q-dependent-line-container(33%);

    .line {
      border-left: var(--line-width) solid var(--accent-color);

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

      &:before {
        left: 0;
        bottom: 0;
        border-left: var(--line-width) solid var(--accent-color);
      }

      &:after {
        @include square(var(--icon-size));
        border-radius: 1000px;
        border: var(--line-width) solid var(--accent-color);
        left: calc((var(--line-width) - var(--icon-size)) / 2);
      }
    }

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

      padding-right: var(--normal-margin);
    }
  }

  @include on-large-screen {
    .line-container {
      min-width: 160px;
    }

    &:not(:first-of-type) .card {
      margin-top: var(--large-margin);
    }
  }

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

    .line-container {
      @include q-dependent-line-container(50%);
      height: 150px;
      min-width: 64%;

      .date {
        transform: translateX(calc(var(--icon-size) / 2 + 12px)) translateY(-10%);
      }
    }
  }

  .card {
    text-align: center;
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    z-index: 1;
    background-color: var(--blurred-card-color);
    transition: background-color var(--transition-time);

    @include blurred-background();

    img,
    video,
    iframe {
      border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    $border-width: 1px;

    .lower {
      & > * {
        padding: 0 var(--normal-margin);
        margin-top: var(--small-margin);
      }

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

      & > p {
        text-align: center;
      }

      .more {
        overflow: hidden;
        margin: 0;
        height: 0;
        transition: height var(--transition-time);

        .content p {
          margin-top: var(--line-height);
        }
      }

      .buttons {
        display: flex;
        justify-content: center;
        border-top: $border-width solid var(--normal-text-color);
        transition: border-color var(--transition-time);

        margin: 0;
        padding: 0;
        margin-top: var(--small-margin);

        .info-button {
          @include image-button(var(--icon-size));
          @include main-font();

          .svgContainer {
            position: relative;
            margin: auto;
            @include square(var(--icon-size));

            svg {
              stroke: var(--normal-text-color);
              transition: stroke var(--transition-time);
            }
          }

          p {
            @include main-font();
            padding-bottom: var(--small-margin);
            font-size: 0.9rem;
            font-style: italic;
            padding: 0 8px 8px 8px;
          }
        }

        & > * {
          flex: 1;

          padding-top: var(--small-margin);
          &:not(:last-child) {
            border-right: $border-width solid var(--normal-text-color);
            transition: border-color var(--transition-time);
          }
        }
      }
    }
  }
}