.c-iterations-footer {
    @apply flex items-center px-24;
    @apply overflow-x-auto;
    z-index: 1;

    background: linear-gradient(
        180deg,
        var(--backgroundColorB) 0%,
        var(--backgroundColorB) 50%
    );
    box-shadow: 0px -4px 16px var(--backgroundColorB);

    & .iterations {
        @apply flex flex-grow gap-20 items-center;
        @apply mr-24;
        @apply overflow-x-auto overflow-y-visible;
        @apply py-16;

        & .iteration {
            height: 32px;
            width: 32px;
            @apply relative flex items-center justify-center;
            @apply rounded-circle border-1 border-borderLight;
            @apply font-semibold font-mono text-13;
            @apply shrink-0;

            & .comments {
                top: -12px;
                left: 20px;

                @apply absolute py-4 px-6 rounded-5;
                @apply border-1 border-borderLight bg-backgroundColorA;
                @apply text-darkGray text-13 font-semibold font-mono;

                &.unread {
                    color: var(--textColorIterationCommentsUnread);
                    background: var(--backgroundColorIterationCommentsUnread);
                    border-color: var(--borderColorIterationCommentsUnread);
                }
            }

            & .new {
                top: -12px;
                left: 20px;

                @apply absolute py-4 px-6 rounded-5;
                @apply border-1 border-borderLight bg-yellowPrompt;
                @apply text-darkGray text-12 font-semibold font-mono uppercase;
            }

            &.active {
                color: var(--textColorIterationActive);
                border-color: var(--borderColorIterationActive);
                background: var(--backgroundColorTeamInfoBox);
            }
        }
        & .previous {
            @apply ml-64 mr-12;
        }
    }
    & .settings-button {
        @apply ml-auto;

        & .c-icon {
            height: 16px;
            width: 16px;
        }
    }
}
