// chappe
//
// Copyright 2021, Crisp IM SAS
// Author: Valerian Saliou <valerian@valeriansaliou.name>

@use "../_config" with (
  $inlining: $use-inline-images
);

@use "../_globals" as *;

#changes {
  position: relative;

  .navigate {
    user-select: none;
    position: absolute;
    right: 0;
    top: 70px;
    z-index: 1;

    &::before {
      content: "";
      background-color: var(--color-grey-light);
      width: 2px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
    }

    .navigate-item {
      margin-bottom: 4px;

      &:last-of-type {
        margin-bottom: 0;
      }

      &.navigate-item--active {
        &,
        &:hover,
        &:active {
          .navigate-link {
            color: var(--color-white);
            background-color: var(--color-accent-base);
            z-index: 3;
          }
        }
      }

      &,
      .navigate-link {
        display: block;
      }

      .navigate-link {
        background-color: transparent;
        color: var(--color-black);
        letter-spacing: -.12px;
        text-align: left;
        line-height: 24px;
        padding-left: 17px;
        padding-right: 12px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        transition: background-color linear 75ms;
        position: relative;
        z-index: 1;

        @include font-size(14px);

        &:hover {
          background-color: var(--color-changes-navigate-link-background-hover);
        }

        &:active {
          background-color: var(--color-changes-navigate-link-background-active);
        }
      }
    }
  }

  .content {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 126px;

    .title {
      color: var(--color-black);

      @include font-size(22px);
    }

    .notice {
      background: var(--color-changes-notice-background);
      margin-top: 18px;
      padding: 18px 28px;
      overflow: hidden;
      position: relative;
      border-radius: 2px;

      &::before {
        content: "";
        background-color: var(--color-grey-light);
        width: 5px;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
      }
    }

    .timeline {
      .month {
        margin-top: 52px;

        .month-name {
          color: var(--color-black);

          @include font-size(22px);
        }

        .month-events {
          margin-top: 25px;

          .month-event {
            $event-default-padding-top-bottom: 4px;
            $event-deprecated-padding-top-bottom: 10px;

            border-bottom: 1px solid var(--color-changes-month-event-border);
            margin-bottom: 14px;
            padding-bottom: 14px;
            display: flex;
            flex-direction: row;

            &.month-event--deprecated {
              .month-event-group {
                color: var(--color-red);
                padding-top: $event-deprecated-padding-top-bottom;
              }

              .month-event-text {
                background-color: var(--color-changes-month-event-deprecated-background);
                border-color: var(--color-red);
                padding-top: $event-deprecated-padding-top-bottom;
                padding-bottom: $event-deprecated-padding-top-bottom;
                padding-right: 8px;
              }
            }

            &:last-child {
              border-bottom: 0 none;
              margin-bottom: 0;
              padding-bottom: 0;
            }

            .month-event-group,
            .month-event-text {
              line-height: 20px;

              @include font-size(14px);
            }

            .month-event-group {
              color: var(--color-changes-month-event-group-text);
              line-height: 22px;
              width: 120px;
              padding-top: $event-default-padding-top-bottom;
              padding-right: 8px;
              flex: 0 0 auto;
            }

            .month-event-text {
              border-color: var(--color-grey);
              border-width: 0 0 0 2px;
              border-style: solid;
              padding: $event-default-padding-top-bottom 0 $event-default-padding-top-bottom 14px;
              flex: 1;
            }
          }
        }
      }
    }
  }
}

// - Media Queries

// For screens below defined widths

@media screen and (width <= 1140px) {
  #changes {
    .content {
      .content-aside {
        padding-right: 80px;
      }
    }
  }
}

@media screen and (max-width: $screen-tiny-width-breakpoint) {
  #changes {
    .navigate {
      text-align: center;
      margin-top: 14px;
      position: static;

      &::before {
        display: none;
      }

      .navigate-item {
        margin-right: 1px;

        &:last-of-type {
          margin-right: 0;
        }

        &,
        .navigate-link {
          display: inline-block;
        }

        .navigate-link {
          padding: 0 10px;
          border-radius: 3px;
        }
      }
    }

    .content {
      padding-top: 22px;
      padding-bottom: 74px;

      .content-aside {
        padding-right: 0;
      }

      .title,
      .timeline .month .month-name {
        text-align: center;
      }

      .notice {
        padding: 14px 24px;
      }

      .timeline {
        .month {
          margin-top: 36px;

          .month-events {
            .month-event {
              border-bottom: 0 none;
              margin-bottom: 20px;
              padding-bottom: 0;
              display: block;

              &,
              &.month-event--deprecated {
                .month-event-group {
                  padding: 0 0 2px;
                }

                .month-event-text {
                  padding-top: 6px;
                }
              }

              &.month-event--deprecated {
                .month-event-text {
                  padding-left: 10px;
                  padding-right: 10px;
                }
              }

              .month-event-group {
                text-align: center;
                width: 100%;
              }

              .month-event-text {
                border-width: 2px 0 0;
                padding-left: 2px;
                padding-right: 2px;
              }
            }
          }
        }
      }
    }
  }
}