@use 'globals' as *;

.wrapper {
    & .main-navigation {
        margin-left: 320px;
        background: $cyan;
        padding: 20px 20px 12px 20px;
        width: calc(100% - 320px);
        z-index: 999;
        position: sticky;
        top: 0;
        @media (max-width: 991px) {
            margin-left: 200px;
            width: calc(100% - 200px);
        }

        &--top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;

            &---left {
                & .pill-role {
                    border-radius: 30px;
                    border: thin solid $darkblue;
                    display: inline-block;
                    padding: 7px 10px;
                    text-transform: uppercase;
                    font-size: 10px;
                    line-height: 11px;
                    font-weight: bold;
                    margin-bottom: 10px;
                }
                & .page-title {
                    font-size: 24px;
                    line-height: 43px;
                    font-family: $open;
                    font-weight: bold;
                    color: $darkblue;
                    margin-bottom: 5px;
                }

                & .page-subtitle {
                    font-size: 14px;
                    line-height: 19px;
                    font-family: $open;
                    color: #617afa;
                    font-weight: 500;
                }
            }

            &---right {


                & .buttons-list {
                    & a {

                    }
                }
            }
        }

        &--bottom {
            display: flex;
            justify-content: space-between;
            border-bottom: thin solid $grey;
            padding-bottom: 7px;

            &---left {
                & ul {
                    & li {
                        margin-right: 24px;

                        &.active {
                            & a {
                                color: $blue;
                                font-weight: 500!important;
                            }
                        }

                        & a {
                            font-weight: normal!important;
                            color: $grey;
                        }
                    }
                }
            }

            &---right {

                & ul {
                    & li {
                        margin-left: 30px;

                        & a {
                            color: $darkblue;
                        }
                    }
                }
            }

            & ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                font-size: 15px;

                & li {
                    & a {
                        font-weight: bold;
                        text-decoration: none;

                        &:hover {
                            color: $blue;
                        }

                        &.active {
                            color: $blue;
                        }

                        & i {
                            font-size: 14px;
                            margin-right: 5px;
                        }
                    }
                }
            }
        }
    }
}