/* ==============================================================
   Widget Search Result Navigation
   style declarations for widget_searchresultNavigation.xhtml
   ==============================================================*/
#widgetSearchResultNavigation {
    h2 {}
    .search-result-navigation-wrapp {
    	display: flex;
    	align-items: center;
        padding: 10px;
	    border-right: @border;
    	border-left: @border;
    	background-color: @bg-content-box;
        .search-result-navigation-left,
        .search-result-navigation-center,
        .search-result-navigation-right {}
        .search-result-navigation-left,
        .search-result-navigation-right {
            &:hover {
            	svg {
	            	background-color: @lightgray;
					& when (@colorModes = true) {
						.mx-dark-mode-rules ({
	            			background-color: @bg-hover;
						});
						.mx-light-mode-rules ({
	            			background-color: @lightgray;
						});
					}
				}
            }
        }
        .search-result-navigation-left {
            a {}
            span {}
            svg {}
        }
        .search-result-navigation-center {
            span {}
        }
        .search-result-navigation-right {
            a {}
            span {}
            svg {}
        }
    }
    .search-result-navigation-back-to-collection {
        padding: 10px;
        padding-top: 0;
        font-size: @fontMedium;
        border: @border;
        border-top: 0;
        background-color: @bg-content-box;
        a {
            svg {}
        }
        &:hover {
        	svg {
	        	background-color: @lightgray;
				& when (@colorModes = true) {
					.mx-dark-mode-rules ({
	        			background-color: @bg-hover;
					});
					.mx-light-mode-rules ({
	        			background-color: @lightgray;
					});
				}
			}
        }
    }
}

/* BREAKPOINT FOR LARGE DESKTOPS */
@media screen and (max-width: @largeBreakpoint) {}

/* BREAKPOINT FOR DESKTOPS */
@media screen and (max-width: @mediumBreakpoint) {}

/* BREAKPOINT FOR TABLETS */
@media screen and (max-width: @smallBreakpoint) {}

/* BREAKPOINT FOR SMARTPHONES */
@media screen and (max-width: @xSmallBreakpoint) {}
