.changelog {
  .changelog__list {
    display: flex;
    gap: var(--sp-4);
    align-items: center;
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-4);

    @media screen and (max-width: 990px){
      flex-direction: column;
      align-items: flex-start;
    }
  }
  
  .parent-selector,
  .child-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) var(--sp-5d5);
    background: rgb(var(--color-blue));
    cursor: pointer;
    border-radius: var(--sp-2);
    transition: all 0.3s ease;
    user-select: none;
    min-width: 250px;
    color: rgb(var(--color-total-white));
    font-size: var(--sp-4);
    position: relative;
    cursor: pointer;

    &:has(.child-selector__list:empty) {
      display: none;
    }
    
    .parent-selector__selected,
    .child-selector__selected {
      font-size: var(--sp-4d5);
    }

    .changelog-arrow {
      transition: transform 0.3s ease;
    }

    &.active {
      border-radius: var(--sp-2) var(--sp-2) 0 0;

      .parent-selector__list,
      .child-selector__list {
        display: flex;
      }

      .changelog-arrow {
        transform: rotate(180deg);
      }
    }

    .parent-selector__list,
    .child-selector__list {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: #f8f9fa;
      border-radius: 0 0 var(--sp-2) var(--sp-2);
      padding: var(--sp-2) var(--sp-4d5);
      width: calc(100%);
      border: 1px solid #d0d5dd;
      height: fit-content;
      flex-direction: column;
      z-index: 10;
      max-height: 200px;
      overflow-y: scroll;
      color: rgb(var(--color-foreground));

      label {
        padding: var(--sp-2) 0;
        cursor: pointer;
      }

      input {
        display: none;
      }
    }
  }

  .changelog__content {
    white-space: break-spaces;
    font-family: var(--font-family-base);

    ol {
      padding-left: var(--sp-5);
    }

    ul {
      list-style: disc;
      padding-left: var(--sp-5);

      li {
        padding-inline-start: var(--sp-2);
      }

      ::marker {
        color: rgb(var(--color-foreground) / 0.25);
        content: var(--icon-dot);
      }
    }
  }
}