﻿input#mrp-save-bar-actions[type="checkbox"] {
    display: none;
}

.mrp-stoplight-icon {
    display: none;
}

.mrp-save-bar-bottom.mrp-save-bar-bottom-v2 {
    display: flex;
    flex-direction: row;
    width: 100%;

    .mrp-save-bar-inner {
        display: flex;
        flex-direction: row;
        justify-self: flex-start;
        flex: 65;
        margin-right: 0px !important;

        .mrp-save-bar-additional-button {
            &:not(:last-child) {
                margin-right: 5px;
            }
        }
    }

    .save-button-wrap {
        width: 175px;
        /*flex: 5;*/
        transition: all 200ms ease-in-out;

        .btn-link {
            color: #4c4a49;
            text-decoration: none;
        }

        button {
            width: 100%;
        }
    }

    .mrp-additional-buttons-wrapper {
        flex: 65;

        &.alert-danger {
            background-color: #f5f5f5;
            border-color: #CCCCCC;
            color: #333;
        }
    }
}

#mrp-portal {
    &.mrp-menu-open.mrp-menu-flyout {
        .mrp-save-bar-bottom-v2 {
            transition: all 200ms ease-in-out;
            padding-left: 205px;
        }
    }

    &.mrp-menu-flyout {
        .mrp-save-bar-bottom-v2 {
            transition: all 200ms ease-in-out;
            padding-left: 65px;
        }
    }
}

/* M E D I A   Q U E R I E S */
@media (max-width: 1199px) {
    /* WILL GO AWAY SOONISH when tracks go to new menu layout */
    #mrp-portal:not(.mrp-menu-flyout) {
        .mrp-tray-offset {
            .mrp-save-bar-bottom.mrp-save-bar-bottom-v2 {
                padding-left: 85px;
            }
        }
    }
    /* END TEMP CSS */

    .mrp-save-bar-bottom.mrp-save-bar-bottom-v2 {
        .mrp-save-bar-inner {
            flex: 50;
        }
    }
}

@media (max-width: 767px) {
    /* WILL GO AWAY SOONISH when tracks go to new menu layout */
    .mrp-menu-flyout {
        .mrp-save-bar-bottom.mrp-save-bar-bottom-v2 {
            padding-left: 0px !important;

            &:has(.mrp-save-bar-additional-buttons) {
                padding-left: 10px;
            }
        }
    }

    .mrp-tray-offset {
        .mrp-save-bar-bottom.mrp-save-bar-bottom-v2 {
            padding-left: 95px;
        }
    }
    /* END TEMP CSS */

    .mrp-save-bar.mrp-save-bar-bottom.mrp-save-bar-bottom-v2 {
        padding-left: 0px;
        height: 65px;
        padding-top: 4px;

        input#mrp-save-bar-actions[type="checkbox"] {
            display: none;
        }

            input#mrp-save-bar-actions[type="checkbox"]:checked ~ label {
                color: #333 !important;
            }

            input#mrp-save-bar-actions[type="checkbox"]:checked ~ div.mrp-save-bar-inner {
                bottom: 65px;
                position: fixed;
                margin-left: -10px;
            }

        .mrp-save-bar-inner {
            margin: 100px 0px 0px -415px;
            width: 100%;
            background-color: #F5F5F5;
            flex-direction: column;
            text-align: center;
            padding: 0px 10px;
            box-shadow: 0px -2px 3px rgba(0, 0, 0, 0.2);

            .mrp-save-bar-additional-button {
                padding: 7px 0px;
                margin-right: 0px;

                a {
                    color: #333;
                    text-decoration: none;
                    width: 100%;

                    &.btn-default {
                        padding: 8px;
                    }
                }
            }
        }

        .mrp-additional-buttons-wrapper {
            flex: unset;

            &:has(*) {
                padding: 10px 0px 10px 10px;
                -moz-transition: all 200ms ease-in;
                -webkit-transition: all 200ms ease-in;
                -o-transition: all 200ms ease-in;
                transition: all 200ms ease-in;
            }

            &.alert-danger {
                margin-top: -4px;
                padding-top: 14px;
                background-color: #f2dede;
                border-color: #ebccd1;
                color: #a94442;
            }
        }

        .save-button-wrap {
            height: 65px;
            flex: 90;
            border-left: none !important;
            -moz-transition: all 200ms ease-in;
            -webkit-transition: all 200ms ease-in;
            -o-transition: all 200ms ease-in;
            transition: all 200ms ease-in;

            .btn {
                padding: 8px 12px;
            }

            .btn-link {
                color: #4c4a49;
                text-decoration: none;
            }

            button {
                width: 100%;
            }

            &.alert-danger {
                margin-top: -4px;
                padding-top: 14px;
            }
        }

        label.mrp-stoplight-icon {
            color: #333;
            display: block;
            font-size: 11px;
            -moz-transition: all 200ms ease-in;
            -webkit-transition: all 200ms ease-in;
            -o-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
            background-color: #fff;
            padding: 12px 12px 9px 12px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
    }

    .mrp-save-alert-bar.mrp-save-alert-bottom {
        &:has(+ .mrp-save-bar-bottom-v2) {
            bottom: 65px !important;
            text-align: center !important;
            padding-left: 0 !important;
        }
    }
}
