/*
    "Components" used throughout the site in varying ways.
    For example, .toggler is used in a few different widgets (TOC, subnav, etc.)
*/

@import '../includes/vars';
@import '../includes/mixins';

/* toggler component: a basic slide up and slide now system*/
.toggler {
    position: relative;

    {$selector-icon} {
        bidi-style(right, $icon-margin, left, auto);
        position: absolute;
        top: 3px;
        color: $text-color;
    }

    .icon-caret-right {
        bidi-value-vendorize(transform, rotate(0deg), rotate(180deg));
    }
}

.toggle-container.closed {
    display: none;
}

/* subnav component:  used within the wiki */
.subnav {
    .toggler, > ol > li > a {
        padding: $grid-spacing (2 * $grid-spacing) $grid-spacing $grid-spacing;
        border-bottom: 1px dotted #d4dde4;
        text-transform: uppercase;
        display: block;
    }

    ol ol {
        display: none; /* prevents flash of unstyled content */

        .no-js & {
            display: block;
        }
    }

    .toggleable.current, > ol > li.current {
        background: $light-background-color;
    }

    {$selector-icon} {
        top: ($grid-spacing + 3px);
        right: $grid-spacing;
    }

    .toggle-container {
        a {
            set-smaller-font-size();
            display: block;
            padding: $list-item-spacing $grid-spacing;
        }

        .toggleable {
            background: #e9eef1;

            .toggler {
                title-header();
                font-weight: normal;
                padding-top: ($grid-spacing / 2);
                padding-bottom: ($grid-spacing / 2);
                border: 0;

                i {
                    top: ($grid-spacing / 2);
                }
            }

            .toggle-container a {
                padding-left: ($grid-spacing * 1.5);
            }
        }

        li.current {
            > a:not(.toggler) {
                position: relative;
                color: #fff;
                background-color: $text-color;

                generate-arrow();

                &:before {
                    border-right-color: #fff;
                    position: absolute;
                    top: 20%;
                    right: 0;
                }
            }
        }
    }

    reverse-link-decoration();
}

/* hoping to one day use these colours to generate most colours we use on MDN but just here for now */

$red = #ea3b28;
$yellow = #ffcb00;
$green = #70a300;
$blue = #0095dd;
$grey = #c7ccce;

$negative = $red;
$warning = $yellow;
$positive = $green;
$neutral = $blue;
$default = $grey;

$text-dark = $text-color;
$text-light = #fff;

/* functions to transform the base colours into variations of themselves */

theme-pale-light($color) {
    return tint($color, 80%);
}

theme-pale-medium($color) {
    $color = theme-pale-light($color);
    $color = darken($color, 20%);
    return $color;
}

theme-pale-dark($color) {
    return darken($color, 20%);
}

/* functions to get correct text colours for variations of theme colours */

theme-pale-text($color) {
    $color = theme-pale-light($color);
    $color = darken($color, 60%);
    return $color;
}

theme-pale-contrast-text($color){
    $hu = hue($color);
    $lite = lightness($color);
    $sat = saturation($color);
    if (($hu < 20deg || $hu > 199deg) && $sat > 30% && $lite < 70%) {
        $color = $text-light;
    } else if ($lite < 50%) {
        $color = $text-light;
    } else {
        $color = $text-dark;
    }
    return $color;
}

/* function to apply all the generated colours to a notification to theme it */

notification-theme($color) {
    background-color: theme-pale-light($color);
    border-color: theme-pale-medium($color);
    color: theme-pale-contrast-text(theme-pale-light($color));

    .notification-button {
        background-color: theme-pale-medium($color);
        color: theme-pale-text($color);

        &:hover, &:focus {
          background: transparent;
          text-decoration: none;
        }
    }

    .notification-img i {
        color: theme-pale-dark($color);
    }

    button.close {
        color: theme-pale-medium($color);

        &:hover, &:focus {
            color: theme-pale-dark($color);
        }
    }

}

/* style notifications */

.notification {
    @extends .media;
    border-radius: 2px;
    border-style: solid;
    border-width: 2px;
    margin-bottom: $grid-spacing;
    padding: ($grid-spacing / 2);
    position: relative;

    body > & {
        margin-bottom: 0;
    }

    &.closed {
        display: none;
    }

    &.clickable {
        cursor: pointer;
    }

    /* little x button in top right corner */
    button.close {
        background: transparent;
        border: 0;
        box-shadow: none;
        display: block;
        padding: 2px;
        position: absolute;
        top: 0;
        right: 0px;
    }

    /* theme the various notification states */
    notification-theme($default);

    &.info {
        notification-theme($neutral);
    }

    &.success {
        notification-theme($positive);
    }

    &.warning {
        notification-theme($warning);

        /* warning clashes with a class in CustomCSS so we have to re-assert border-width and link colour
           the CustomCSS class might be changeable in the future but we can't change the notifier class
           because it is part of a django module . See also .notification-button. */
        border-width: @border-width;
        font-style: normal;

        a, a:visited, a:hover, a:focus {
            border-bottom: 0;
            color: $link-color;
            text-decoration: none;
        }

        a:hover, a:focus {
            text-decoration: underline;
        }
    }

    &.error {
        notification-theme($negative);
    }
}

.notification-message {
    @extends .media-body; /* here incase there's an icon, has the added benfiit of acting like a clearfix */

    /* remove margin from first element in message */
     & *:first-child {
        margin-top: 0;
    }
}

/* optional icon, message displays fine without it */
.notification-img {
    @extends .media-img;

    {$selector-icon} {
        font-size: $larger-font-size;
        margin: 0;
    }
}

/* class to add to <button> and <a> to make them look buttony */
.notification-button {
    border: 1px solid;
    border-radius: 2px;
    box-shadow: none;
    display: inline-block;
    line-height: 1;
    margin: 5px 5px 0 0;
    padding: 2px 5px 3px;
    text-transform: none;

    .notification.warning & { /* see comment for &.warning */
        border: @border;
        margin: @margin;
        padding: @padding;
    }

}

.notification-tray {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 999999;
    width: 300px;
    font-size: $smaller-font-size;

    .notification {
        margin-bottom: 8px;
    }
}
