.dropdown {
  & .dropdown__post {
    border-top: 0.5px solid #D9D9D9;
    border-bottom: 0.5px solid #D9D9D9;

    &:first-child,
    &:last-child {
      border-top: none;
      border-bottom: none;
    }

    & .dropdown__post-container {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 12px 0;
      width: 100%;
    }

    & .dropdown__post-inner {
      display: flex;
      width: 100%;
      padding: 24px 0;
      align-items: center;
      cursor: pointer;

      & .dropdown__post-number {
        font-weight: 700;
        font-size: 16px;
        line-height: 100%;
        flex: 1;
        max-width: 15%;
      }

      & .dropdown__post-content {
        max-width: 624px;
        display: flex;
        flex-direction: column;
        flex: 1;

        & .dropdown__post-title {
          font-weight: 700;
          font-size: 24px;
          line-height: 32px;
        }
      }

      & .dropdown__post-button {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        max-width: 100%;

        .dropdown__post-btn {
          background-color: var(--color-dark);
          color: var(--color-white);
          width: 52px;
          height: 52px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;

          &:focus,
          &:focus-within {
            outline: none;
          }

          &:hover {
            background-color: var(--color-white);
            color: var(--color-dark);
          }

          &.self-start {
            align-self: flex-start;
            transition: all 0.4s ease;
          }

          & svg {
            width: 42px;
            height: 42px;
            transform: rotate(45deg);
            transition: transform 0.3s ease;
          }

          & svg.rotate-45 {
            transform: rotate(-0deg);
            transition: transform 0.3s ease;
          }
        }
      }
    }

    & .dropdown__post-bottom {
      width: 100%;
      display: flex;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.4s ease, opacity 0.4s ease;

      & .dropdown__post-info {
        width: 100%;
        flex: 1;
        max-height: 0;
        overflow: hidden;
        opacity: 0;

        display: flex;
        flex-direction: column;
        gap: 32px;
        padding-bottom: 24px;
        transition: max-height 0.4s ease, opacity 0.4s ease, gap 0.4s ease;

        & .dropdown__post-excerpt {
          font-weight: 400;
          font-size: 16px;
          line-height: 150%;
          max-width: 47rem;
        }

        & .dropdown__post-link {
          width: fit-content;
          background-color: var(--color-dark);
          color: var(--color-white);
          border: 1px solid var(--color-dark);
          margin-left: 2px;

          &:hover {
            background-color: var(--color-white);
            color: var(--color-dark);
          }
        }
      }

      &:not(.dropdown__post-bottom--hidden) {
        max-height: 500px;
        opacity: 1;
      }

      &.dropdown__post-bottom--hidden {
        max-height: 0;
        opacity: 0;
      }

      & .dropdown__post-info:not(.dropdown__post-info--hidden) {
        max-height: 500px;
        opacity: 1;
      }

      & .dropdown__post-info.dropdown__post-info--hidden {
        max-height: 0;
        opacity: 0;
        gap: 0;
        padding-bottom: 0;
      }

      & .dropdown__post-spacer {
        display: block;
        flex: 1;
        opacity: 0;
        visibility: hidden;
      }

      & .dropdown__post-spacer--left {
        max-width: 15%;
      }

      & .dropdown__post-spacer--right {
        max-width: 20%;
      }
    }


  }
}

@media (max-width: 720px) {
  .dropdown {
    & .dropdown__post {
      &:first-child {
        & .dropdown__post-container {
          & .dropdown__post-inner {
            padding-top: 0;
          }
        }
      }

      & .dropdown__post-container {
        padding: 0;
      }

      & .dropdown__post-inner {
        column-gap: 24px;

        & .dropdown__post-content {
          & .dropdown__post-title {
            font-size: 18px;
            line-height: 28px;
          }
        }

        & .dropdown__post-number {
          max-width: 5%;
        }

        & .dropdown__post-button {
          max-width: fit-content;

          & .dropdown__post-btn {
            width: 48px;
            height: 48px;

            & svg {
              width: 36px;
              height: 36px;
            }
          }
        }
      }

      & .dropdown__post-info {
        gap: 32px;

        & .dropdown__post-excerpt {
          font-size: 14px;
          line-height: 20px;
        }

        & .dropdown__post-link {
          width: 100%;
          text-align: center;
        }
      }

      & .dropdown__post-spacer {
        display: none !important;
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .dropdown__post-number {
    transition: none;
  }
}