@import url('../../../media.css');

.contribute-menu {
    align-items: center;
    height: 100%;
    border: none;
    border-bottom: 4px solid transparent;

    & .contribute-links-wrapper {
        border-bottom: 4px solid transparent;
    }

    &.active .contribute-links-wrapper {
        border-bottom: 4px solid var(--blue);
    }

    & svg {
        transition: transform var(--easing) var(--transition-duration);
    }

    @media (--md-down) {
        flex-direction: column;
        align-items: flex-start;
    }

    .contribute-links-wrapper,
    .menu-wrapper {
        display: flex;
        align-items: center;
        height: 100%;

        @media (--lg-down) {
            display: none;
        }
    }

    .menu-wrapper {
        position: relative;
        display: none;

        @media (--lg-down) {
            display: none;
        }
    }

    &.active .menu-wrapper {
        display: flex;

        @media (--lg-down) {
            display: none;
        }
    }

    .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 0;
        cursor: default;

        .menu-list {
            display: flex;
            background: var(--white);
            box-shadow: 0 2px 5px 0 var(--light-grey);

            .vertical-line {
                border-inline-start: 1px solid var(--grey);
                margin: 24px 0;
                height: 100px;

                @media (--md-down) {
                    display: none;
                }
            }
        }

        .content-container {
            padding: 20px 10px 24px 20px;

            p.content-title {
                width: fit-content;
                font-size: 14px;
                font-weight: 600;
                font-family: var(--base-font-family);
                color: var(--warm-grey);
                margin-block-end: 8px;
                padding: 0;

                &.spontaneous {
                    &::after {
                        content: 'BETA';
                        margin-inline-start: 4px;
                        background: linear-gradient(
                            90deg,
                            var(--gradient-pink) 0%,
                            var(--gradient-purple) 100%
                        );
                        background-clip: text;
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }
            }
        }

        ul {
            list-style: none;
            margin: 0;
            width: 350px;

            li {
                margin-left: 12px;
                margin-bottom: 20px;
                width: fit-content;

                .content {
                    display: flex;
                    align-items: center;
                    gap: 10px;

                    a {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 230px;
                        margin-inline-end: 0;
                    }

                    .chat-bubble-icon {
                        align-self: flex-end;
                    }
                }

                .list-items-wrapper div {
                    display: flex;
                    align-items: center;
                }

                svg {
                    width: 16px;
                    height: 16px;

                    path {
                        fill: var(--black);
                    }

                    &.mic-icon path,
                    &.chat-bubble-icon path {
                        fill: var(--red);
                    }

                    &.play-icon path,
                    &.check-circle-icon path {
                        fill: var(--valid-green);
                    }

                    &.edit-icon path,
                    &.question-icon path,
                    &.transcribe-icon path {
                        fill: var(--blue);
                    }

                    &.review-icon path,
                    &.thumbsup-icon path {
                        fill: var(--light-purple);
                    }
                }
            }

            li:last-child {
                margin-bottom: 0;
                padding-bottom: 4px;
            }

            li.write,
            li.review {
                margin-left: 2px;
            }
        }

        a.contribute-link,
        p {
            font-weight: 400;
            text-transform: capitalize;
            font-size: 16px;
            padding: 0;
            overflow-x: auto;
            max-width: 280px;
            white-space: nowrap;
            width: auto;
        }

        p.coming-soon-text {
            color: var(--warm-grey);
            cursor: default;

            span {
                font-size: var(--font-size-xs);
            }
        }

        a.contribute-link {
            display: flex;
            align-items: center;

            svg,
            img {
                margin-inline-end: 12px;
            }
        }
    }

    &.active .menu {
        display: flex;
    }

    .nav-header-item {
        text-transform: uppercase;
        font-family: var(--base-font-family);
        font-size: var(--font-size-xs);
        font-weight: 600;
        color: var(--warm-grey);
        margin: 20px 0 8px;

        @media (--lg-down) {
            margin-inline-start: 30px;
        }

        @media (--xl-up) {
            text-align: center;
        }
    }

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

    .menu-wrapper-mobile {
        width: 100%;
        margin-block-start: 8px;

        .mobile-menu-list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;

            .content-container {
                height: 100%;

                p.content-title {
                    width: fit-content;
                    margin-inline-start: 40px;
                    font-size: 14px;
                    color: var(--warm-grey);
                }
            }
        }

        @media (--xl-up) {
            display: none;
        }

        ul {
            list-style: none;
            margin: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            li {
                display: flex;
                flex-wrap: wrap;
                flex-grow: 1;
                align-items: end;
                margin-block-end: 12px;

                .content {
                    display: flex;
                    align-items: end;
                    margin-inline-start: 30px;
                    width: 100%;

                    .contribute-link {
                        margin-inline-start: 8px;
                        margin-inline-end: 0;
                    }
                }

                .list-items-wrapper {
                    @media (--lg-down) {
                        display: flex;
                        flex-direction: column;

                        div {
                            display: flex;
                            align-items: end;
                            width: 400px;
                        }
                    }
                }

                svg {
                    width: 16px;
                    height: 16px;
                    margin-block-end: 2px;

                    &.chat-bubble-icon {
                        margin-block-end: 0;
                    }

                    &.mic-icon path,
                    &.chat-bubble-icon path {
                        fill: var(--red);
                    }

                    &.play-icon path,
                    &.check-circle-icon path {
                        fill: var(--valid-green);
                    }

                    &.edit-icon path,
                    &.question-icon path,
                    &.transcribe-icon path {
                        fill: var(--blue);
                    }

                    &.review-icon path {
                        fill: var(--light-purple);
                    }
                }
            }

            li.selected-option {
                background: var(--lighter-grey);

                .content {
                    border-bottom: 1px solid var(--blue);
                    margin-block-end: 8px;
                }

                a {
                    color: var(--blue);
                }

                g,
                path {
                    fill: var(--blue);
                }
            }

            li:last-child {
                margin-bottom: 0;
            }
        }

        & .scripted-speech-list,
        & .spontaneous-speech-list {
            .content {
                margin-inline-start: 54px;
                margin-block-start: 8px;
            }
        }
    }
}
