@import 'compass';

// This file is best viewed with Tab size 4 code indentation


// -----------------------------------------------------------------------------------------------------------------
// 1. Theme Quick Settings (Variables)
// (for further control, you will need to dig into the actual CSS in 2.)
// -----------------------------------------------------------------------------------------------------------------


// ----------------------------------------------------------
// :: 1.1. Colors
// ----------------------------------------------------------

$sm-dox__white:                                       #fff !default;
$sm-dox__gray:                                        darken($sm-dox__white, 6.5%) !default;
$sm-dox__gray-dark:                                   darken($sm-dox__white, 26.5%) !default;
$sm-dox__gray-darker:                                 darken($sm-dox__white, 66.5%) !default;
$sm-dox__red:                                         #D23600 !default;

$sm-dox__box-shadow:                                  rgba(0, 0, 0, 0.2) !default;


// ----------------------------------------------------------
// :: 1.2. Breakpoints
// ----------------------------------------------------------

$sm-dox__desktop-vp:                                  768px !default;     // switch from collapsible to desktop


// ----------------------------------------------------------
// :: 1.3. Typography
// ----------------------------------------------------------

$sm-dox__font-family:                                 "Lucida Grande", "Geneva", "Helvetica", Arial, sans-serif !default;
$sm-dox__font-size-base:                              13px !default;
$sm-dox__font-size-small:                             12px !default;
$sm-dox__line-height:                                 15px !default;


// ----------------------------------------------------------
// :: 1.4. Borders
// ----------------------------------------------------------

$sm-dox__border-width:                                1px !default;
$sm-dox__border-radius:                               5px !default;


// ----------------------------------------------------------
// :: 1.5. Collapsible main menu
// ----------------------------------------------------------

// Menu box
//$sm-dox__collapsible-bg:                              $sm-dox__gray !default;
$sm-dox__collapsible-bg:                              url('tab_b.png') !default;
$sm-dox__collapsible-border-radius:                   $sm-dox__border-radius !default;

// Items
$sm-dox__collapsible-item-color:                      $sm-dox__gray-darker !default;
$sm-dox__collapsible-item-current-color:              $sm-dox__red !default;
$sm-dox__collapsible-item-disabled-color:             darken($sm-dox__gray, 20%) !default;
$sm-dox__collapsible-item-padding-vertical:               0px !default;
$sm-dox__collapsible-item-padding-horizontal:             12px !default;

// Items separators
$sm-dox__collapsible-separators-color:                rgba(0, 0, 0, 0.05) !default;

// Toggle button (sub menu indicators)
$sm-dox__collapsible-toggle-bg:                       rgba(255, 255, 255, 0.5) !default;


// ----------------------------------------------------------
// :: 1.6. Collapsible sub menus
// ----------------------------------------------------------

// Menu box
$sm-dox__collapsible-sub-bg:                          rgba(darken($sm-dox__gray, 30%), 0.1) !default;

// Items text indentation for deeper levels
$sm-dox__collapsible-sub-item-indentation:            8px !default;


// ----------------------------------------------------------
// :: 1.7. Desktop main menu
// ----------------------------------------------------------

// Menu box
//$sm-dox__desktop-bg:                                  $sm-dox__gray !default;
$sm-dox__desktop-bg:                                  url('tab_b.png') !default;
//$sm-dox__desktop-border-radius:                       100px !default;
$sm-dox__desktop-padding-horizontal:                  10px !default;

// Items
$sm-dox__desktop-item-color:                          $sm-dox__gray_darker !default;
$sm-dox__desktop-item-hover-color:                    $sm-dox__red !default;
$sm-dox__desktop-item-current-color:                  $sm-dox__red !default;
$sm-dox__desktop-item-disabled-color:                 darken($sm-dox__gray, 20%) !default;
$sm-dox__desktop-item-padding-vertical:               0px !default;
$sm-dox__desktop-item-padding-horizontal:             12px !default;

// Sub menu indicators
$sm-dox__desktop-arrow-size:                          4px !default;       // border-width
$sm-dox__desktop-arrow-color:                         $sm-dox__gray-darker !default;
$sm-dox__desktop-arrow-spacing:                       4px !default;

// Vertical menu box
$sm-dox__desktop-vertical-border-radius:              $sm-dox__border-radius !default;
$sm-dox__desktop-vertical-padding-vertical:           10px !default;

// Vertical items
$sm-dox__desktop-vertical-item-hover-bg:              $sm-dox__white !default;
$sm-dox__desktop-vertical-item-padding-vertical:      10px !default;
$sm-dox__desktop-vertical-item-padding-horizontal:    20px !default;

$sm-dox__main-text-color:                             #283A5D !default;
$sm-dox__main-highlight-color:                        white !default;

// ----------------------------------------------------------
// :: 1.8. Desktop sub menus
// ----------------------------------------------------------

// Menu box
$sm-dox__desktop-sub-bg:                              $sm-dox__white !default;
$sm-dox__desktop-sub-border-color:                    $sm-dox__gray-dark !default;
$sm-dox__desktop-sub-border-radius:                   $sm-dox__border-radius !default;
$sm-dox__desktop-sub-box-shadow:                      0 5px 9px $sm-dox__box-shadow !default;
$sm-dox__desktop-sub-padding-vertical:                5px !default;
$sm-dox__desktop-sub-padding-horizontal:              0 !default;

// Items
$sm-dox__desktop-sub-item-color:                      $sm-dox__gray_darker !default;
$sm-dox__desktop-sub-item-hover-color:                $sm-dox__red !default;
$sm-dox__desktop-sub-item-hover-bg:                   $sm-dox__gray !default;
$sm-dox__desktop-sub-item-current-color:              $sm-dox__red !default;
$sm-dox__desktop-sub-item-disabled-color:             darken($sm-dox__white, 20%) !default;
$sm-dox__desktop-sub-item-padding-vertical:           10px !default;
$sm-dox__desktop-sub-item-padding-horizontal:         20px !default;

// Sub menu indicators
$sm-dox__desktop-sub-arrow-size:                      5px !default;       // border-width

// Sub menu carets
$sm-dox__desktop-sub-caret-size:                      8px !default;       // border-width
$sm-dox__desktop-sub-caret-left:                      30px !default;

$sm-dox__main-row-height: 36px !default;

// -----------------------------------------------------------------------------------------------------------------
// 2. Theme CSS
// -----------------------------------------------------------------------------------------------------------------


// ----------------------------------------------------------
// :: 2.1. Collapsible mode (mobile first)
// ----------------------------------------------------------

// calc item height and sub menus toggle button size
$sm-dox__item-height: $sm-dox__line-height + $sm-dox__collapsible-item-padding-vertical * 2;
// set toggle button size to 80% of item height
$sm-dox__toggle-size: floor($sm-dox__main-row-height * 0.8);
$sm-dox__toggle-spacing: floor($sm-dox__main-row-height * 0.1);

// Main menu box
.sm-dox {
    background-image: $sm-dox__collapsible-bg;
    //@include border-radius($sm-dox__collapsible-border-radius);

    // Main menu items
    a {
        &,
        &:focus,
        &:hover,
        &:active {
            padding: $sm-dox__collapsible-item-padding-vertical $sm-dox__collapsible-item-padding-horizontal;
            /* make room for the toggle button (sub indicator) */
            padding-right: $sm-dox__collapsible-item-padding-horizontal + $sm-dox__toggle-size + $sm-dox__toggle-spacing;
            /* color: $sm-dox__collapsible-item-color; */
            font-family: $sm-dox__font-family;
            font-size: $sm-dox__font-size-base;
            font-weight: bold;
            line-height: 36px; //$sm-dox__line-height;
            text-decoration: none;
            text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.9);
            color: $sm-dox__main-text-color;
            outline: none;
        }

        &:hover {
            background-image: url('tab_a.png');
            background-repeat:repeat-x;
            color: $sm-dox__main-highlight-color;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
        }

        &.current {
            color: $sm-dox__collapsible-item-current-color;
        }

        &.disabled {
            color: $sm-dox__collapsible-item-disabled-color;
        }

        // Toggle buttons (sub menu indicators)
        span.sub-arrow {
            position: absolute;
            top: 50%;
            margin-top: -(ceil($sm-dox__toggle-size / 2));
            left: auto;
            right: $sm-dox__toggle-spacing;
            width: $sm-dox__toggle-size;
            height: $sm-dox__toggle-size;
            overflow: hidden;
            font: bold #{$sm-dox__font-size-small}/#{$sm-dox__toggle-size} monospace !important;
            text-align: center;
            text-shadow: none;
            background: $sm-dox__collapsible-toggle-bg;
            @include border-radius($sm-dox__border-radius);
        }
        // Change + to - on sub menu expand
        &.highlighted span.sub-arrow:before {
            display: block;
            content: '-';
        }
    }

    // round the corners of the first item
    > li:first-child > a, > li:first-child > :not(ul) a {
        @include border-radius($sm-dox__collapsible-border-radius $sm-dox__collapsible-border-radius 0 0);
    }
    // round the corners of the last item
    @include sm-dox__round-corners-last-item($sm-dox__collapsible-border-radius);

    // Main menu items separators
    //li {
    //    /*border-top: 1px solid $sm-dox__collapsible-separators-color;*/
    //	border-top: 0;
    //}
    //> li:first-child {
    //    border-top: 0;
    //}

    // Sub menus box
    ul {
        background: $sm-dox__collapsible-sub-bg;

        // Sub menus items
        a {
            &,
            &:focus,
            &:hover,
            &:active {
                font-size: $sm-dox__font-size-small;
                // add indentation for sub menus text
                border-left: $sm-dox__collapsible-sub-item-indentation solid transparent;
                //line-height: $sm-dox__line-height;
                line-height: $sm-dox__main-row-height;
                text-shadow: none;
	        background-color: white;
		background-image: none;
            }

            &:hover {
        //        color: $sm-dox__collapsible-item-current-color;
	//	background-color: $sm-dox__gray;
            background-image: url('tab_a.png');
            background-repeat:repeat-x;
            color: $sm-dox__main-highlight-color;
            text-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
            }

        }

        // Add indentation for sub menus text for deeper levels
        @include sm-dox__sub-items-indentation($sm-dox__collapsible-sub-item-indentation);
    }
}


// ----------------------------------------------------------
// :: 2.2. Desktop mode
// ----------------------------------------------------------

@media (min-width: $sm-dox__desktop-vp) {

    /* Switch to desktop layout
    -----------------------------------------------
       These transform the menu tree from
       collapsible to desktop (navbar + dropdowns)
    -----------------------------------------------*/
    /* start... (it's not recommended editing these rules) */
    .sm-dox ul{position:absolute;width:12em;}
    .sm-dox li{float:left;}
    .sm-dox.sm-rtl li{float:right;}
    .sm-dox ul li,.sm-dox.sm-rtl ul li,.sm-dox.sm-vertical li{float:none;}
    .sm-dox a{white-space:nowrap;}
    .sm-dox ul a,.sm-dox.sm-vertical a{white-space:normal;}
    .sm-dox .sm-nowrap > li > a,.sm-dox .sm-nowrap > li > :not(ul) a{white-space:nowrap;}
    /* ...end */

    // Main menu box
    .sm-dox {
        padding: 0 $sm-dox__desktop-padding-horizontal;
        background-image: $sm-dox__desktop-bg;
        line-height: 36px;
        //@include border-radius($sm-dox__desktop-border-radius);

        // Main menu items
        a {
            // Sub menu indicators
            span.sub-arrow {
                top: 50%;
                margin-top: -(ceil($sm-dox__desktop-arrow-size / 2));
                right: $sm-dox__desktop-item-padding-horizontal;
                width: 0;
                height: 0;
                border-width: $sm-dox__desktop-arrow-size;
                border-style: solid dashed dashed dashed;
                border-color: $sm-dox__main-text-color transparent transparent transparent;
                background: transparent;
                @include border-radius(0);
            }

            &,
            &:focus,
            &:active,
            &:hover,
            &.highlighted {
                padding: $sm-dox__desktop-item-padding-vertical $sm-dox__desktop-item-padding-horizontal;
                /*color: $sm-dox__desktop-item-color;*/
                background-image:url('tab_s.png');
                background-repeat:no-repeat;
                background-position:right;
                @include border-radius(0 !important);
            }
            &:hover {
              background-image: url('tab_a.png');
              background-repeat:repeat-x;
              color: $sm-dox__main-highlight-color;
              text-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
              span.sub-arrow {
                border-color: $sm-dox__main-highlight-color transparent transparent transparent;
              }
            }

            // Make room for the sub arrows
            &.has-submenu {
                padding-right: $sm-dox__desktop-item-padding-horizontal + $sm-dox__desktop-arrow-size * 2 + $sm-dox__desktop-arrow-spacing;
            }
        }

        // No main menu items separators
        li {
            border-top: 0;
        }

        // First sub level carets
        > li > ul:before,
        > li > ul:after {
            content: '';
            position: absolute;
            top: -($sm-dox__desktop-sub-caret-size * 2 + $sm-dox__border-width * 2);
            left: $sm-dox__desktop-sub-caret-left;
            width: 0;
            height: 0;
            overflow: hidden;
            border-width: ($sm-dox__desktop-sub-caret-size + $sm-dox__border-width);
            border-style: dashed dashed solid dashed;
            border-color: transparent transparent $sm-dox__gray-dark transparent;
        }
        > li > ul:after {
            top: -($sm-dox__desktop-sub-caret-size * 2);
            left: ($sm-dox__desktop-sub-caret-left + $sm-dox__border-width);
            border-width: $sm-dox__desktop-sub-caret-size;
            border-color: transparent transparent $sm-dox__desktop-sub-bg transparent;
        }

        // Sub menus box
        ul {
            border: $sm-dox__border-width solid $sm-dox__gray-dark;
            padding: $sm-dox__desktop-sub-padding-vertical $sm-dox__desktop-sub-padding-horizontal;
            background: $sm-dox__desktop-sub-bg;
            @include border-radius($sm-dox__desktop-sub-border-radius !important);
            @include box-shadow($sm-dox__desktop-sub-box-shadow);

            // Sub menus items
            a {
                 span.sub-arrow {
                  right: 8px;
                  top: 50%;
                  margin-top: -$sm-dox__desktop-sub-arrow-size;
                  border-width: $sm-dox__desktop-sub-arrow-size;
                  border-color: transparent transparent transparent $sm-dox__desktop-sub-item-color;
                  border-style: dashed dashed dashed solid;
                }

                &,
                &:hover,
                &:focus,
                &:active,
                &.highlighted {
                    color: $sm-dox__desktop-sub-item-color;
                    background-image:none;
                    border: 0 !important;
                    color: $sm-dox__desktop-sub-item-color;
                    background-image:none;
                }

                &:hover {
                    background-image: url('tab_a.png');
                    background-repeat:repeat-x;
                    color: $sm-dox__main-highlight-color;
                    text-shadow: 0px 1px 1px rgba(0, 0, 0, 1.0);
                  span.sub-arrow {
                    border-color: transparent transparent transparent $sm-dox__main-highlight-color;
                  }
                }
            }
        }

        // Scrolling arrows containers for tall sub menus - test sub menu: "Sub test" -> "more..." in the default download package
        span.scroll-up,
        span.scroll-down {
            position: absolute;
            display: none;
            visibility: hidden;
            overflow: hidden;
            background: $sm-dox__desktop-sub-bg;
            height: 36px;
            // width and position will be set automatically by the script

            &:hover {
                background: $sm-dox__desktop-sub-item-hover-bg;
            }
        }
        span.scroll-up:hover span.scroll-up-arrow {
            border-color: transparent transparent $sm-dox__desktop-sub-item-hover-color transparent;
        }
        span.scroll-down:hover span.scroll-down-arrow {
            border-color: $sm-dox__desktop-sub-item-hover-color transparent transparent transparent;
        }
        span.scroll-up-arrow {
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -6px;
            // we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too
            width: 0;
            height: 0;
            overflow: hidden;
            border-width: 6px; // tweak size of the arrow
            border-style: dashed dashed solid dashed;
            border-color: transparent transparent $sm-dox__desktop-sub-item-color transparent;
        }
        span.scroll-down-arrow {
            @extend span.scroll-up-arrow;
            top: 8px;
            border-style: solid dashed dashed dashed;
            border-color: $sm-dox__desktop-sub-item-color transparent transparent transparent;
        }


        // Rigth-to-left

        // Main menu box
        &.sm-rtl {

            // Main menu items
            a {

                // Make room for the sub arrows
                &.has-submenu {
                    padding-right: $sm-dox__desktop-item-padding-horizontal;
                    padding-left: $sm-dox__desktop-item-padding-horizontal + $sm-dox__desktop-arrow-size * 2 + $sm-dox__desktop-arrow-spacing;
                }

                // Sub menu indicators
                span.sub-arrow {
                    right: auto;
                    left: $sm-dox__desktop-item-padding-horizontal;
                }
            }

            // Vertical main menu items
            &.sm-vertical {
                a {

                    // No need for additional room for the sub arrows
                    &.has-submenu {
                        padding: $sm-dox__desktop-vertical-item-padding-vertical $sm-dox__desktop-vertical-item-padding-horizontal;
                    }

                    // Sub menu indicators
                    span.sub-arrow {
                        right: auto;
                        left: 8px;
                        border-style: dashed solid dashed dashed;
                        border-color: transparent $sm-dox__desktop-arrow-color transparent transparent;
                    }
                }
            }

            // First sub level carets
            > li > ul:before {
                left: auto;
                right: $sm-dox__desktop-sub-caret-left;
            }
            > li > ul:after {
                left: auto;
                right: ($sm-dox__desktop-sub-caret-left + $sm-dox__border-width);
            }

            // Sub menus box
            ul {
                a {

                    // No need for additional room for the sub arrows
                    &.has-submenu {
                        padding: $sm-dox__desktop-sub-item-padding-vertical $sm-dox__desktop-sub-item-padding-horizontal !important;
                    }

                    // Sub menu indicators
                    span.sub-arrow {
                        right: auto;
                        left: 8px;
                        border-style: dashed solid dashed dashed;
                        border-color: transparent $sm-dox__desktop-arrow-color transparent transparent;
                    }
                }
            }
        }


        // Vertical main menu

        // Main menu box
        &.sm-vertical {
            padding: $sm-dox__desktop-vertical-padding-vertical 0;
            @include border-radius($sm-dox__desktop-vertical-border-radius);

            // Main menu items
            a {
                padding: $sm-dox__desktop-vertical-item-padding-vertical $sm-dox__desktop-vertical-item-padding-horizontal;

                &:hover,
                &:focus,
                &:active,
                &.highlighted {
                    background: $sm-dox__desktop-vertical-item-hover-bg;
                }

                &.disabled {
                    background-image: $sm-dox__desktop-bg;
                }

                // Sub menu indicators
                span.sub-arrow {
                    right: 8px;
                    top: 50%;
                    margin-top: -$sm-dox__desktop-sub-arrow-size;
                    border-width: $sm-dox__desktop-sub-arrow-size;
                    border-style: dashed dashed dashed solid;
                    border-color: transparent transparent transparent $sm-dox__desktop-arrow-color;
                }
            }

            // No sub level carets
            > li > ul:before,
            > li > ul:after {
                display: none;
            }

            // Sub menus box
            ul {

                // Sub menus items
                a {
                    padding: $sm-dox__desktop-sub-item-padding-vertical $sm-dox__desktop-sub-item-padding-horizontal;

                    &:hover,
                    &:focus,
                    &:active,
                    &.highlighted {
                        background: $sm-dox__desktop-sub-item-hover-bg;
                    }

                    &.disabled {
                        background: $sm-dox__desktop-sub-bg;
                    }
                }
            }
        }
    }
}