.functionality-bar {
    display: flex;
    justify-content: flex-end;
    padding: 16px 0;
    border-bottom: solid 1px var(--color-border);

    ul {
        display: flex;
        justify-content: flex-end;
        gap: 24px;

        @media (--viewport-ms-max) {
            width: 100%;
        }

        li {
            position: relative;
            width: fit-content;

            .wrap {
                display: flex;
                align-items: center;
                gap: 8px;

                a {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                }

                .icon {
                    fill: var(--color-icon-accent);
                }
            }

            .dropdown-menu--open {
                right: 0;
                top: unset;
            }
        }

        @media (--viewport-ms-max) {
            li {
                .wrap {
                    a {
                        span {
                            display: none;
                        }
                    }
                }

                &:first-child {
                    flex-grow: 1;

                    .wrap {
                        a {
                            span {
                                display: inline;
                            }
                        }
                    }

                    align-self: start;
                }
            }
        }
    }

    &.withData {
        justify-content: space-between;
        align-items: center;

        ul:first-of-type {
            li {
                .wrap {
                    .icon {
                        fill: var(--color-icon);
                    }
                }

            }
        }

        @media (--viewport-sm-max) {
            ul:last-of-type {
                li {
                    .wrap {
                        .bodycopy-s{display: none;}
                        }
                }
            }
        }

        @media (--viewport-ms-max) {
            flex-direction: column;
            gap: 32px;

            ul:first-of-type {flex-wrap: wrap;justify-content: flex-start;gap:16px;
                li {
                    .wrap {
                        white-space: nowrap;
                    }
                    &:first-child{
                        flex-grow: unset;
                    }
                }
            }

            ul:last-of-type {justify-content: flex-start;
                li {
                    &:first-child{
                        flex-grow: unset;
                    }
                }
            }
        }
    }
}