.digit-accordion-title {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    background-color: transparent;
    gap: theme(digitv2.spacers.spacer3);

    @media (max-aspect-ratio: 9/16) {
        padding: theme(digitv2.spacers.spacer4);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        padding: theme(digitv2.spacers.spacer5);
    }

    @media (min-aspect-ratio: 3/4) {
        padding: theme(digitv2.spacers.spacer6);
    }
}

.digit-accordion-icon {
    width: theme(digitv2.spacers.spacer6);
    height: theme(digitv2.spacers.spacer6);
    flex-shrink: 0;
}

.digit-accordion-number {
    @extend .typography.heading-s;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.bold);
    line-height: theme(digitv2.lineHeight.lineheight1);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.heading-s.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.heading-s.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.heading-s.desktop);
    }
    color: theme(digitv2.lightTheme.text-primary);
    min-width: theme(digitv2.spacers.spacer6);
    height: theme(digitv2.spacers.spacer6);
    display: flex;
    align-items: center;
    justify-content: center
}

.digit-accordion-header-title {
    @extend .typography.heading-s;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.bold);
    line-height: theme(digitv2.lineHeight.lineheight1);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.heading-s.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.heading-s.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.heading-s.desktop);
    }
    color: theme(digitv2.lightTheme.text-primary);
    margin-top: 0.18rem;
    flex-grow: 1;
}

.digit-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background-color: transparent;
    display: flex;
    gap: 0.625rem;
    flex-direction: column;
    @extend .typography.body-s;
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.regular);
    line-height: theme(digitv2.lineHeight.lineheight2);

    @media (max-aspect-ratio: 9/16) {
        font-size: theme(digitv2.fontSize.body-s.mobile);
        padding: 0rem theme(digitv2.spacers.spacer4);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        font-size: theme(digitv2.fontSize.body-s.tablet);
        padding: 0rem theme(digitv2.spacers.spacer5);
    }

    @media (min-aspect-ratio: 3/4) {
        font-size: theme(digitv2.fontSize.body-s.desktop);
        padding: 0rem theme(digitv2.spacers.spacer6);
    }

    color: theme(digitv2.lightTheme.text-primary);
}

.digit-accordion-content.open {
    max-height: fit-content;

    @media (max-aspect-ratio: 9/16) {
        padding: theme(digitv2.spacers.spacer4);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        padding: theme(digitv2.spacers.spacer5);
    }

    @media (min-aspect-ratio: 3/4) {
        padding: theme(digitv2.spacers.spacer6);
    }
}

.digit-accordion {
    &.border {
        border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
    }

    &.borderRadius {
        border-radius: theme(digitv2.spacers.spacer1);
    }

    &.withDivider {
        .digit-accordion-content.open{
            border-top: 1px solid theme(digitv2.lightTheme.generic-divider);
        }
    }

    &.no-divider {
        .digit-accordion-title {
            padding-bottom: theme(digitv2.spacers.spacer0);
        }
    }

    &.cardBg {
        background-color: theme(digitv2.lightTheme.paper-primary);

        &.nested {
            background-color: theme(digitv2.lightTheme.paper-secondary);
        }
    }
}

@keyframes rotateOpen {
    from {
        transform: rotate(-180deg);
    }

    to {
        transform: rotate(-90deg);
    }
}

@keyframes rotateClose {
    from {
        transform: rotate(-90deg);
    }

    to {
        transform: rotate(-180deg);
    }
}

.digit-accordion-toggle{
    display: flex;
    align-items: center;
    width: theme(digitv2.spacers.spacer6);
    height: theme(digitv2.spacers.spacer6);
}

.digit-accordion-toggle.animate-open svg {
    animation: rotateOpen 0.5s ease forwards;
}

.digit-accordion-toggle.animate-close svg {
    animation: rotateClose 0.5s ease forwards;
}

.digit-accordion-wrapper {
    display: flex;
    flex-direction: column;

    @media (max-aspect-ratio: 9/16) {
        gap: theme(digitv2.spacers.spacer4);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
        gap: theme(digitv2.spacers.spacer5);
    }

    @media (min-aspect-ratio: 3/4) {
        gap: theme(digitv2.spacers.spacer6);
    }
}

.digit-accordion-divider {
    width: 100%;
}