// import global variables
@import "setup/settings";

// import any additional mixins
@import "setup/helpers";

// import colourscheme
@import "setup/colours";



/* ==========================================================================
   ONLY for use in design patterns - classes NOT USED in actual theme distro.
   ========================================================================== */

body {
    display: block;
    padding: 0 1em 1em;
}

.design-patterns-section {
    padding-top: 0.25em;
}

.design-patterns-menu {
    max-width: 62em;
    margin: 0 auto;
    padding: 2em 0;

    // Enforce LTR behaviour in nav list.

    ol {
        padding: 0 0 0 2em;
    }
}

.design-patterns-heading {
    padding-top: 1em;
}

/**
 * Make sure code examples use black text within information blocks.
 */

.information code {
    color: $color-text;
}

/**
 * ScrollSpy indicators.
 */

.is-inview {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        z-index: 2001;
        left: -2em;
        width: 1.5em;
        height: 1.5em;
        border-radius: 0.25em;
        background-color: rgba($color-link-focus, 0.25);
    }
}

@include dark-mode {
    .is-inview::before {
        background-color: rgba($dark-color-link-focus, 0.25);
    }
}


/* Colour palette.
   ========================================================================== */

/**
 * Generate the colour swatches dynamically.
 *
 * More info: http://www.guyroutledge.co.uk/blog/style-guide-colours-with-sass/
 */

$colors: (
    "text":                 $color-text,
    "text-footnote":        $color-text-footnote,
    "gradient-from":        $color-gradient-from,
    "gradient-to":          $color-gradient-to,
    "border-extra-dark":    $color-border-extra-dark,
    "border-dark":          $color-border-dark,
    "border":               $color-border,
    "border-light":         $color-border-light,
    "border-extra-light":   $color-border-extra-light,
    "link":                 $color-link,
    "link-hover":           $color-link-hover,
    "link-focus":           $color-link-focus,
    "link-selecting":       $color-selecting,
    "link-selected":        $color-selected,
    "background":           $color-background,
    "background-box":       $color-background-box,
    "highlight-box":        $color-highlight-box,
    "strong-highlight-box": $color-strong-highlight-box,
    "accent-gradient-from": $color-accent-gradient-from,
    "accent-gradient-to":   $color-accent-gradient-to,
    "success-text":         $color-success-text,
    "success-background":   $color-success-background,
    "warning-text":         $color-warning-text,
    "warning-background":   $color-warning-background,
    "error-text":           $color-error-text,
    "error-background":     $color-error-background,
    "info-text":            $color-info-text,
    "info-background":      $color-info-background
);

$dark-colors: (
    "text":                 $dark-color-text,
    "text-footnote":        $dark-color-text-footnote,
    "gradient-from":        $dark-color-gradient-from,
    "gradient-to":          $dark-color-gradient-to,
    "border-extra-dark":    $dark-color-border-extra-dark,
    "border-dark":          $dark-color-border-dark,
    "border":               $dark-color-border,
    "border-light":         $dark-color-border-light,
    "border-extra-light":   $dark-color-border-extra-light,
    "link":                 $dark-color-link,
    "link-hover":           $dark-color-link-hover,
    "link-focus":           $dark-color-link-focus,
    "link-selecting":       $dark-color-selecting,
    "link-selected":        $dark-color-selected,
    "background":           $dark-color-background,
    "background-box":       $dark-color-background-box,
    "highlight-box":        $dark-color-highlight-box,
    "strong-highlight-box": $dark-color-strong-highlight-box,
    "accent-gradient-from": $color-accent-gradient-from,
    "accent-gradient-to":   $color-accent-gradient-to,
    "success-text":         $dark-color-success-text,
    "success-background":   $dark-color-success-background,
    "warning-text":         $dark-color-warning-text,
    "warning-background":   $dark-color-warning-background,
    "error-text":           $dark-color-error-text,
    "error-background":     $dark-color-error-background,
    "info-text":            $dark-color-info-text,
    "info-background":      $dark-color-info-background
);

.design-patterns-color {
    display: block;
    position: relative;
    height: 3em; // 39px / 13px
    margin: 1em 0;
    border: 1px solid $color-border;

    &::after {
        position: absolute;
        top: 0.69230769230769em; // 9px / 13px
        padding: 1px 0.23076923076923em; // 3px / 13px
        background-color: rgba(255, 255, 255, 0.66);
        font-family: $font-code;
    }
}

@include dark-mode {
    .design-patterns-color {
        border-color: $dark-color-border;

        &::after {
            background-color: rgba(0, 0, 0, 0.66);
        }
    }
}

@each $name, $color in $colors {
    .design-patterns-color-#{$name} {
        background: $color;

        &::after {
            content: "#{$color}";
        }
    }
}

@include dark-mode {
    @each $name, $color in $dark-colors {
        .design-patterns-color-#{$name} {
            background: $color;

            &::after {
                content: "#{$color}";
            }
        }
    }
}


/* Layout grid examples.
   ========================================================================== */

.design-patterns-box {
    margin-top: 0;
    padding: 1em;
    background: rgba(0, 0, 0, 0.33);
}


/* jQuery UI styling specific to design patterns.
   ========================================================================== */

/**
 * The list of all available icons.
 */

.jquery-ui-icons li {
    position: relative;
    margin: 2px;
    padding: 4px 0;
    float: left;
    list-style: none;
    cursor: pointer;
}

[dir="rtl"] .jquery-ui-icons li {
    float: right;
}

.jquery-ui-icons .ui-icon {
    margin: 0 4px;
    float: left;
}

[dir="rtl"] .jquery-ui-icons .ui-icon {
    float: right;
}

/**
 * The vertical slider example.
 */

.jquery-ui-slider-vertical span {
    height: 120px;
    margin: 15px;
    float: left;
}

[dir="rtl"] .jquery-ui-slider-vertical span {
    float: right;
}

/**
 * Declare a width for jQuery UI menus.
 */

.ui-menu {
    width: 150px;
}

/**
 * Absolute positioning for miscellaneous jQuery UI menus.
 */

.ui-menu:not(.jquery-ui-menu) {
    position: absolute;
    z-index: 1000;
}

/**
 * Additional information tags on design patterns doc headings.
 *
 * Example HTML:
 *
 * <h2>Title <span>new v4.7</span></h2>
 */

.design-patterns-section h1 span,
h2 span {
    font-size: 1rem;
    font-weight: normal;
}

@media (min-width: $break-small) {
    body {
        padding: 0 2em 1em;
    }
}

@media (min-width: $break-large) {
    body {
        padding: 0 4% 1em;
    }

    /**
     * Fixed sidebar.
     */

    .design-patterns-menu {
        position: fixed;
        z-index: 2000;
        top: 0;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        width: 27%;
        padding: 2em 2%;
        overflow-x: hidden;
        overflow-y: auto;
        border-right: 1px solid $color-border;
        background-color: $color-background-box;
        box-shadow: inset -0.25em 0 0.25em -0.25em rgba(0, 0, 0, 0.2);
    }

    body.darkmode .design-patterns-menu {
        border-right-color: $dark-color-border-extra-dark;
        background-color: $dark-color-background-box;
    }

    .design-patterns-content {
        margin-left: 28%;
    }

    .design-patterns-content-container {
        max-width: 80em;
        margin: 0 auto;
    }
}