@use 'src/styles/abstracts' as *;

.ReleaseNotes {
  display: flex;
  flex-direction: column;
  &__Spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 40px);
  }
  &__latest {
    display: flex;
    flex-direction: column;
    margin-top: $space-lg;
    padding: 0 $space-lg $space-unit;
    border-bottom: $border-dark-lighter;
    &__title {
      display: flex;
      margin-bottom: $space-sm;
      span {
        margin-left: $space-xs;
        padding: $space-xxxxs $space-xxxs;
        color: $white;
        background-color: $primary-color;
        border-radius: $border-radius-xss;
        font-size: 10px;
        font-weight: $font-700;
      }
    }
    &__content {
      display: flex;
      flex-direction: column;
      a {
        text-decoration: none;
        display: block;
      }
      &__item {
        display: flex;
        padding-left: 18px;
        margin-bottom: $space-sm;
        position: relative;
        span {
          word-break: break-word;
        }
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 3px;
          width: 7px;
          height: 7px;
          border-radius: $border-radius-circle;
          background-color: $pico-30;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  &__changelog {
    border-bottom: $border-dark-lighter;
    &__title {
      padding: $space-sm $space-lg 0;
    }
    &__content {
      margin-top: $space-sm;
      max-height: 290px;
      padding: 0 $space-lg $space-unit;
      overflow: auto;
      .ReleaseNoteItem {
        &::after {
          height: calc(100% + #{$space-sm});
        }
      }
    }
    &__currentRelease {
      position: relative;
      padding: $space-sm $space-lg;
      .ReleaseNoteItem {
        &::after {
          top: -13px;
          height: calc(100% + #{$space-sm});
        }
      }
      &::before {
        content: '';
        transition: all 0.18s ease-out;
        opacity: 0;
        position: absolute;
        left: 0;
        top: -12px;
        height: 13px;
        width: 100%;
        background: linear-gradient(
          180deg,
          rgba(234, 235, 239, 0) 0%,
          #eaebef 100%
        );
      }
      &__scroll {
        &::before {
          opacity: 1;
        }
        .ReleaseNoteItem {
          &::after {
            top: -11px !important;
          }
        }
      }
    }
  }
}
