@oat-sa/tao-core-ui 3.24.1 → 3.24.3

package/src/resource/css/selector.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../scss/inc/_functions.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../scss/selector.scss%23sass","../scss/selector.scss","../../../scss/inc/_colors.scss","../scss/_resource-list.scss","../scss/_resource-tree.scss","../scss/_filters.scss"],"names":[],"mappings":"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","file":"selector.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix: '') {\n    @each $icon in $iconList {\n        #{$prefix}#{$icon} {\n            background-position: $x * 1px $y * 1px;\n        }\n        @if $direction == 'x' {\n            $x: $x - 16;\n        } @else {\n            $y: $y - 16;\n        }\n    }\n}\n\n/*\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n   if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n   first param - color, second - position. Also you can use px or other valid units for set position.\n*/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n    $percentage: 0;\n    $units: '%';\n    $count: length($colorList);\n    $increment: calc(100 / ($count - 1));\n    $css: #{$direction + ', '};\n    $sep: ', ';\n    @each $colorItem in $colorList {\n        $color: $colorItem;\n        @if (length($colorItem) > 1) {\n            $color: nth($colorItem, 1);\n            $percentage: nth($colorItem, 2);\n            $units: '';\n        }\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n            $sep: '';\n        }\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n        $percentage: $percentage + $increment;\n    }\n    background: linear-gradient(#{$css});\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n    $gridPx: 840;\n    $rawSpanPx: calc((($gridPx - ($numCols * $gutter)) / $numCols));\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n    $spanPercent: widthPerc($spanPx, $gridPx);\n    $marginPercent: widthPerc($gutter, $gridPx);\n    margin-inline-start: $marginPercent;\n    inline-size: $spanPercent;\n}\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n    @if $whatToPrefix == 'property' {\n        @each $prefix in $prefixes {\n            #{$prefix + $property}: #{$value};\n        }\n    } @else if $whatToPrefix == 'value' {\n        @each $prefix in $prefixes {\n            #{$property}: #{$prefix + $value};\n        }\n    }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction: row) {\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n    flex-item-align: stretch;\n    -ms-flex-item-align: stretch;\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n    // if both, min width and width are set, width will win this conflict\n    @if ($width == auto) {\n        @if ($minWidth != 1) {\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n        } @else {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n            // for a discussion auto vs. main-size\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n        }\n    } @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, 0.2)) {\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n    border: 1px solid $color;\n    border-radius: 2px;\n    -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n    -moz-border-radius: $radius * 1px;\n    -webkit-border-radius: $radius * 1px;\n    border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n    @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n    @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n    @return calc(($colWidth * 100 / $context) * 1%);\n}\n\n@function remDist($fontSizePx) {\n    @return calc(($fontSizePx / 10) * 1rem);\n}\n\n@function black($alpha: 1) {\n    @return (rgba(0, 0, 0, $alpha));\n}\n\n@function white($alpha: 1) {\n    @return (rgba(255, 255, 255, $alpha));\n}\n\n@mixin font-size($remPx, $important: false) {\n    @if $important == true {\n        font-size: calc(($remPx) * 1px) !important;\n        font-size: calc(($remPx / 10) * 1rem) !important;\n    } @else {\n        font-size: calc(($remPx) * 1px);\n        font-size: calc(($remPx / 10) * 1rem);\n    }\n}\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} {\n        @content;\n    }\n    @-moz-keyframes #{$name} {\n        @content;\n    }\n    @-webkit-keyframes #{$name} {\n        @content;\n    }\n    @keyframes #{$name} {\n        @content;\n    }\n}\n\n@mixin animation($value, $type: '') {\n    $animation: animation;\n    @if $type != '' {\n        $animation: $animation + '-' + $type;\n    }\n    @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type: all, $duration: 0.5s, $effect: ease-out, $delay: 0s) {\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s) {\n    @include keyframes(fade) {\n        0% {\n            opacity: 0;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 0;\n        }\n    }\n\n    @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat() {\n    @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n    @include font-size(20);\n    font-family: $headingFont;\n    font-style: normal;\n}\n\n@mixin disableSelect() {\n    @include vendor-prefix(user-select, none, property);\n}\n\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\n@mixin visuallyHidden() {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(1px, 1px, 1px, 1px);\n    margin: 0;\n    padding: 0;\n}\n\n/*\n * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.\n   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;\n     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.\n */\n@mixin writing-mode-vertical-rl {\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl\")} {\n            @content;\n        }\n    }\n}\n@mixin writing-mode-horizontal-tb {\n    & {\n        @content;\n    }\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl .writing-mode-horizontal-tb\")} {\n            @content;\n        }\n    }\n}\n","/* Do not edit */@mixin tao-icon-setup {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'tao' !important;\n  speak: never;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-restricted { content: \"\\e92c\"; }\n@mixin icon-blocked { content: \"\\e92d\"; }\n@mixin icon-copy { content: \"\\e92b\"; }\n@mixin icon-align-center { content: \"\\e92a\"; }\n@mixin icon-multiple-magicwand { content: \"\\e929\"; }\n@mixin icon-sd-import { content: \"\\e91f\"; }\n@mixin icon-sd-export { content: \"\\e924\"; }\n@mixin icon-browse { content: \"\\e925\"; }\n@mixin icon-minus { content: \"\\e926\"; }\n@mixin icon-plus { content: \"\\e927\"; }\n@mixin icon-sd-save { content: \"\\e928\"; }\n@mixin icon-back-button { content: \"\\e91e\"; }\n@mixin icon-japan-incorrect { content: \"\\e91b\"; }\n@mixin icon-japan-correct { content: \"\\e91c\"; }\n@mixin icon-japan-partial { content: \"\\e91d\"; }\n@mixin icon-score-partial { content: \"\\e91a\"; }\n@mixin icon-furigana { content: \"\\e919\"; }\n@mixin icon-add-subsection { content: \"\\e918\"; }\n@mixin icon-info-bare { content: \"\\e923\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-wrap-inline { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-wrap-right { content: \"\\e917\"; }\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-duplicate { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n","@import \"inc/bootstrap\";\n\n@mixin resource-selector-actions {\n    display: inline-block;\n    width: 40px;\n    height: 40px;\n    padding: 10px 0 0 12px;\n    color: $textColor;\n    border-left: solid 1px $uiGeneralContentBg;\n    text-shadow: 0 0 0 transparent;\n    text-decoration: none;\n\n    &:hover, &.active {\n        color: $uiClickableHoverBg;\n        @include transition(color, 200ms, linear);\n    }\n}\n\n.resource-selector{\n    position: relative;\n    height: 100%;\n\n    @include flex-container(nowrap, column);\n    opacity: 0;\n\n\n    background-color: $uiClickableDefaultBg;\n    @include simple-border;\n\n    &.rendered {\n        opacity: 1;\n        @include transition(opacity, 300ms, linear);\n    }\n\n    @import \"resource-list\";\n    @import \"resource-tree\";\n    @import \"filters\";\n\n    nav {\n        height: 40px;\n        @include vendor-prefix(flex, 0 1 40px, property, (-ms-, -webkit-, ''));\n        border-top: solid 1px $uiGeneralContentBorder;\n    }\n\n    .context {\n        @include flex-container(nowrap, row);\n        padding-right: 16px;\n\n        .class-context {\n            @include simple-flex-box;\n            overflow : hidden;\n\n            .class-selector{\n                position: static;\n                .options {\n                    max-height: calc(100% - 120px);\n                    &.folded {\n                        max-height: 0;\n                    }\n                }\n            }\n        }\n\n        & > a {\n            @include resource-selector-actions;\n        }\n    }\n\n    .selection {\n\n        @include flex-container(nowrap, row);\n        padding-right: 16px;\n\n        .selection-control {\n\n            @include vendor-prefix(flex, 0 0 80px, property, (-ms-, -webkit-, ''));\n\n            & > label {\n                @include resource-selector-actions;\n                width: 36px;\n                padding: 10px 0 0 8px;\n                margin: 0;\n            }\n            & > a {\n                @include resource-selector-actions;\n                width: 38px;\n            }\n            .selection-toggle .icon-multi-select:before {\n                @include font-size(16);\n            }\n            .selection-toggle.hidden{\n                display: inline-block !important;\n                visibility: hidden;\n            }\n        }\n        .search {\n            @include simple-flex-box;\n            position: relative;\n\n            padding : 6px 6px 6px 5px;\n\n            &:before {\n                @include tao-icon-setup;\n                @include icon-find;\n                position: absolute;\n                left: 12px;\n                top: 12px;\n                opacity: .4;\n            }\n            input {\n                @include border-radius(2);\n                max-width: inherit;\n                width: 100%;\n                padding: 4px 25px;\n            }\n\n            & > a.filters-opener {\n                position: absolute;\n                right: 12px;\n                top: 10px;\n\n                @include font-size(16);\n                text-decoration: none;\n            }\n        }\n        .filters-container {\n            position: absolute;\n            width: 100%;\n            background-color: $uiClickableDefaultBg;\n            border: solid 1px $uiGeneralContentBorder;\n            @include border-radius-bottom(3);\n            @include box-shadow;\n            left: 0;\n            top: 80px;\n            overflow-y: auto;\n            z-index: 100;\n            max-height: calc(100% - 110px);\n            @include transition(max-height, 300ms, ease);\n\n            &.folded {\n                overflow: hidden;\n                max-height: 0;\n                border-width: 0;\n                @include transition(max-height, 300ms, ease);\n            }\n        }\n    }\n\n    main {\n        @include simple-flex-box;\n\n        min-height: 150px;\n\n        border-top: solid 1px $uiGeneralContentBorder;\n        background-color: $uiGeneralContentBg;\n        height: 100%;\n        overflow-y: scroll;\n\n        .no-results {\n            display:inline-block;\n            width: 100%;\n            text-align:center;\n            margin: 10px auto;\n            opacity: .75;\n        }\n\n        .more {\n            height: 45px;\n            padding: 10px;\n        }\n\n        &.loading .more {\n            opacity: 0.65;\n            cursor : inherit;\n        }\n    }\n\n    footer {\n        height: 30px;\n        @include vendor-prefix(flex, 0 1 30px, property, (-ms-, -webkit-, ''));\n        border-top: solid 1px $uiGeneralContentBorder;\n\n        background-color: $uiClickableDefaultBg;\n        text-align: center;\n        padding: 5px;\n    }\n}\n","@import \"inc/bootstrap\";\n\n@mixin resource-selector-actions {\n    display: inline-block;\n    width: 40px;\n    height: 40px;\n    padding: 10px 0 0 12px;\n    color: $textColor;\n    border-left: solid 1px $uiGeneralContentBg;\n    text-shadow: 0 0 0 transparent;\n    text-decoration: none;\n\n    &:hover, &.active {\n        color: $uiClickableHoverBg;\n        @include transition(color, 200ms, linear);\n    }\n}\n\n.resource-selector{\n    position: relative;\n    height: 100%;\n\n    @include flex-container(nowrap, column);\n    opacity: 0;\n\n\n    background-color: $uiClickableDefaultBg;\n    @include simple-border;\n\n    &.rendered {\n        opacity: 1;\n        @include transition(opacity, 300ms, linear);\n    }\n\n    @import \"resource-list\";\n    @import \"resource-tree\";\n    @import \"filters\";\n\n    nav {\n        height: 40px;\n        @include vendor-prefix(flex, 0 1 40px, property, (-ms-, -webkit-, ''));\n        border-top: solid 1px $uiGeneralContentBorder;\n    }\n\n    .context {\n        @include flex-container(nowrap, row);\n        padding-right: 16px;\n\n        .class-context {\n            @include simple-flex-box;\n            overflow : hidden;\n\n            .class-selector{\n                position: static;\n                .options {\n                    max-height: calc(100% - 120px);\n                    &.folded {\n                        max-height: 0;\n                    }\n                }\n            }\n        }\n\n        & > a {\n            @include resource-selector-actions;\n        }\n    }\n\n    .selection {\n\n        @include flex-container(nowrap, row);\n        padding-right: 16px;\n\n        .selection-control {\n\n            @include vendor-prefix(flex, 0 0 80px, property, (-ms-, -webkit-, ''));\n\n            & > label {\n                @include resource-selector-actions;\n                width: 36px;\n                padding: 10px 0 0 8px;\n                margin: 0;\n            }\n            & > a {\n                @include resource-selector-actions;\n                width: 38px;\n            }\n            .selection-toggle .icon-multi-select:before {\n                @include font-size(16);\n            }\n            .selection-toggle.hidden{\n                display: inline-block !important;\n                visibility: hidden;\n            }\n        }\n        .search {\n            @include simple-flex-box;\n            position: relative;\n\n            padding : 6px 6px 6px 5px;\n\n            &:before {\n                @include tao-icon-setup;\n                @include icon-find;\n                position: absolute;\n                left: 12px;\n                top: 12px;\n                opacity: .4;\n            }\n            input {\n                @include border-radius(2);\n                max-width: inherit;\n                width: 100%;\n                padding: 4px 25px;\n            }\n\n            & > a.filters-opener {\n                position: absolute;\n                right: 12px;\n                top: 10px;\n\n                @include font-size(16);\n                text-decoration: none;\n            }\n        }\n        .filters-container {\n            position: absolute;\n            width: 100%;\n            background-color: $uiClickableDefaultBg;\n            border: solid 1px $uiGeneralContentBorder;\n            @include border-radius-bottom(3);\n            @include box-shadow;\n            left: 0;\n            top: 80px;\n            overflow-y: auto;\n            z-index: 100;\n            max-height: calc(100% - 110px);\n            @include transition(max-height, 300ms, ease);\n\n            &.folded {\n                overflow: hidden;\n                max-height: 0;\n                border-width: 0;\n                @include transition(max-height, 300ms, ease);\n            }\n        }\n    }\n\n    main {\n        @include simple-flex-box;\n\n        min-height: 150px;\n\n        border-top: solid 1px $uiGeneralContentBorder;\n        background-color: $uiGeneralContentBg;\n        height: 100%;\n        overflow-y: scroll;\n\n        .no-results {\n            display:inline-block;\n            width: 100%;\n            text-align:center;\n            margin: 10px auto;\n            opacity: .75;\n        }\n\n        .more {\n            height: 45px;\n            padding: 10px;\n        }\n\n        &.loading .more {\n            opacity: 0.65;\n            cursor : inherit;\n        }\n    }\n\n    footer {\n        height: 30px;\n        @include vendor-prefix(flex, 0 1 30px, property, (-ms-, -webkit-, ''));\n        border-top: solid 1px $uiGeneralContentBorder;\n\n        background-color: $uiClickableDefaultBg;\n        text-align: center;\n        padding: 5px;\n    }\n}\n","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n$textSecondary: #737373;\n$shadowColor: rgba(0, 0, 0, 0.25);\n\n$modalBorderColor: #dddfe2;\n$searchInp: #dddfe2;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorBrand: #266d9c;\n$colorBrandLight: #e4ecef;\n$colorGsDark: #121212; //color ported from nextgen TAO design system\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n",".resource-list {\n    position: relative;\n    height: 100%;\n\n    opacity : 0;\n    &.rendered {\n        opacity: 1;\n        @include transition(opacity, 300ms, linear);\n    }\n\n    &.multiple ul li a:after{\n        display: block;\n        @include transition(all, 200ms, linear);\n    }\n\n    &.multiple ul li[data-access=\"denied\"] a:after {\n        display: none;\n    }\n\n    ul {\n        list-style-type: none;\n        padding: 0;\n        margin: 0;\n\n        li {\n            position: relative;\n            height: 40px;\n            padding: 10px;\n            border-bottom: solid 1px $uiGeneralContentBorder;\n\n            @include transition(background-color, 200ms, linear);\n\n            a {\n                @include transition(color, 200ms, linear);\n                color: $textColor;\n                display: inline-block;\n                width: 100%;\n                padding-right: 25px;\n                overflow: hidden;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n\n                &:after {\n                    @include tao-icon-setup;\n                    @include icon-checkbox;\n                    color: $info;\n                    position: absolute;\n                    right: 17px;\n                    top: 12px;\n                    display: none;\n                }\n                &:hover {\n                    text-decoration: none;\n                }\n\n                & > span {\n                    color: $info;\n                    margin-right: 4px;\n                    @include font-size(16);\n                    vertical-align: top;\n                }\n            }\n\n            &.selected, &:hover {\n                background-color: $uiClickableHoverBg;\n                cursor: pointer;\n                @include transition(background-color, 200ms, linear);\n                a {\n                    color: $textHighlight;\n                    @include transition(color, 200ms, linear);\n\n                    &:after {\n                        color: $textHighlight;\n                    }\n                    & > span {\n                        color: $textHighlight;\n                    }\n                }\n            }\n            &.selected a:after {\n                @include icon-checkbox-checked;\n            }\n\n            &[data-access=denied] > a, &[data-access=partial] > a {\n                [class^=\"icon-\"], [class*=\" icon-\"] {\n                    position: relative;\n                    &:after {\n                        @include icon-lock;\n                        color: #555;\n                        position: absolute;\n                        left: 7px;\n                        top: 6px;\n                    }\n                }\n            }\n            &[data-access=denied] {\n                color: $uiClickableActiveBg;\n                background-color: $textHighlight;\n                &:hover, &:hover > a, & > a, [class^=\"icon-\"]:before, [class*=\" icon-\"]:before  {\n                    cursor: auto;\n                    background-color: $textHighlight;\n                    color: $uiClickableActiveBg !important;\n                }\n            }\n        }\n    }\n}\n",".resource-tree{\n    $nodeHeight: 40px;\n    $actionWidth: 25px;\n    $hoverWidth: $nodeHeight - 15px;\n\n    position: relative;\n    height: 100%;\n    opacity : 0;\n    &.rendered {\n        opacity: 1;\n        @include transition(opacity, 300ms, linear);\n    }\n\n    &.multiple ul li.selectable {\n        & > a > .selector {\n            display: inline-block;\n        }\n    }\n\n    &.multiple ul li.instance[data-access=\"denied\"] a .selector {\n        display: none;\n    }\n\n    .clickable {\n        &:hover {\n            &:before {\n                content: \" \";\n                display: inline-block;\n                position: absolute;\n                width: $hoverWidth;\n                height: $hoverWidth;\n                top: 7.5px;\n                left: 0;\n                border-radius: 50%;\n                background-color: blacken($uiSelectableHoverBg, .2);\n                opacity: .5;\n            }\n        }\n        &:focus {\n            outline: 0 none;\n        }\n    }\n\n    ul {\n        list-style-type: none;\n        padding: 0;\n        margin: 0;\n\n        li {\n            position: relative;\n            cursor: pointer;\n\n            & > a {\n                height: $nodeHeight;\n                line-height: $nodeHeight;\n                display: block;\n                width: 100%;\n                padding-right: 30px;\n                overflow: hidden;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n                border-bottom: solid 1px $uiGeneralContentBorder;\n                color : $textColor;\n            }\n            &.class {\n                .class-toggler {\n                    display: inline-block;\n                    position: relative;\n                    width: $actionWidth;\n                    height: $nodeHeight;\n                    text-align: center;\n                    &:after {\n                        @include tao-icon-setup;\n                        @include icon-down;\n                        @include font-size(15);\n                        position: relative;\n                    }\n                }\n                &.empty .class-toggler{\n                    visibility: hidden;\n                }\n                & > a {\n                    & > .icon-folder:before {\n                        @include icon-folder-open;\n                        color: $warning;\n                        margin-right: 4px;\n                    }\n                    &:hover {\n                        background-color: $uiSelectableHoverBg;\n                        color : $textColor;\n                        @include transition(all, 200ms, linear);\n                    }\n                }\n\n                &.selected {\n                    & > a {\n                        background-color: $uiSelectableSelectedBg;\n                        color: $textHighlight;\n                        &:before, &:after {\n                            color: $textHighlight;\n                        }\n                        @include transition(all, 200ms, linear);\n\n                        &:hover {\n                            background-color: $uiSelectableSelectedHoverBg;\n                            @include transition(all, 200ms, linear);\n                        }\n                        .clickable:hover:before {\n                            background-color: whiten($uiSelectableSelectedHoverBg, .2);\n                        }\n                    }\n                }\n                &.closed {\n                    & > a > .class-toggler:after {\n                        @include icon-right;\n                    }\n                    & > a > .icon-folder:before {\n                        @include icon-folder;\n                    }\n                    & > ul {\n                        display: none;\n                    }\n                }\n            }\n            &.instance {\n                & > a > [class^=\"icon-\"], & > a > [class*=\" icon-\"] {\n                    color: $info;\n                    margin-right: 4px;\n                    margin-left: $actionWidth;\n                    @include font-size(16);\n                }\n                &:hover {\n                    background-color: $uiSelectableHoverBg;\n                    color : $textColor;\n                    @include transition(all, 200ms, linear);\n                }\n                &.selected {\n                    background-color: $uiSelectableSelectedBg;\n                    & > a, & > a > [class^=\"icon-\"], & > a > [class*=\" icon-\"] {\n                        color: $textHighlight;\n                    }\n                    @include transition(all, 200ms, linear);\n\n                    &:hover {\n                        background-color: $uiSelectableSelectedHoverBg;\n                        @include transition(all, 200ms, linear);\n                    }\n                    .clickable:hover:before {\n                        background-color: whiten($uiSelectableSelectedHoverBg, .2);\n                    }\n                }\n            }\n            & > a > .selector {\n                display: none;\n                position: absolute;\n                top: 0;\n                right: 8px;\n                line-height: $nodeHeight;\n                height: $nodeHeight;\n                width: $actionWidth;\n                text-align:center;\n\n                &:after {\n                    @include transition(all, 200ms, linear);\n                    @include tao-icon-setup;\n                    @include icon-checkbox;\n                    @include font-size(15);\n                    color: $info;\n                    line-height: $nodeHeight;\n                    position: relative;\n                }\n            }\n            &.selected > a > .selector:after {\n                @include icon-checkbox-checked;\n            }\n            &.selected > a > .selector:after, &.selected > a:hover > .selector:after {\n                color: $textHighlight;\n            }\n            &[data-access=denied] > a, &[data-access=partial] > a {\n                [class^=\"icon-\"], [class*=\" icon-\"] {\n                    position: relative;\n                    &:after {\n                        @include icon-lock;\n                        color: #555;\n                        position: absolute;\n                        left: 7px;\n                        top: 6px;\n                    }\n                }\n            }\n            &[data-access=denied] {\n                color: $uiClickableActiveBg;\n                background-color: $textHighlight;\n                &:hover, &:hover > a, & > a, [class^=\"icon-\"]:before, [class*=\" icon-\"]:before  {\n                    cursor: auto;\n                    background-color: $textHighlight;\n                    color: $uiClickableActiveBg !important;\n                }\n            }\n            a:hover {\n                text-decoration: none;\n            }\n        }\n    }\n}\n",".filters {\n    position: relative;\n    height: 100%;\n    opacity : 0;\n    &.rendered {\n        opacity: 1;\n        @include transition(opacity, 300ms, linear);\n    }\n\n    .ui-generis-form {\n        margin: 0;\n        padding: 10px;\n        width: 100%;\n        background-color: $uiClickableDefaultBg;\n        border: none;\n        h2 {\n            margin: 0;\n        }\n        .left {\n            width: 100%;\n        }\n        .toolbar {\n            margin: 0;\n        }\n    }\n}\n"]}
+{"version":3,"sources":["../../../scss/inc/_functions.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../scss/selector.scss%23sass","../scss/selector.scss","../../../scss/inc/_colors.scss","../scss/_resource-list.scss","../scss/_resource-tree.scss","../scss/_filters.scss"],"names":[],"mappings":"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","file":"selector.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix: '') {\n    @each $icon in $iconList {\n        #{$prefix}#{$icon} {\n            background-position: $x * 1px $y * 1px;\n        }\n        @if $direction == 'x' {\n            $x: $x - 16;\n        } @else {\n            $y: $y - 16;\n        }\n    }\n}\n\n/*\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n   if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n   first param - color, second - position. Also you can use px or other valid units for set position.\n*/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n    $percentage: 0;\n    $units: '%';\n    $count: length($colorList);\n    $increment: calc(100 / ($count - 1));\n    $css: #{$direction + ', '};\n    $sep: ', ';\n    @each $colorItem in $colorList {\n        $color: $colorItem;\n        @if (length($colorItem) > 1) {\n            $color: nth($colorItem, 1);\n            $percentage: nth($colorItem, 2);\n            $units: '';\n        }\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n            $sep: '';\n        }\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n        $percentage: $percentage + $increment;\n    }\n    background: linear-gradient(#{$css});\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n    $gridPx: 840;\n    $rawSpanPx: calc((($gridPx - ($numCols * $gutter)) / $numCols));\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n    $spanPercent: widthPerc($spanPx, $gridPx);\n    $marginPercent: widthPerc($gutter, $gridPx);\n    margin-inline-start: $marginPercent;\n    inline-size: $spanPercent;\n}\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n    @if $whatToPrefix == 'property' {\n        @each $prefix in $prefixes {\n            #{$prefix + $property}: #{$value};\n        }\n    } @else if $whatToPrefix == 'value' {\n        @each $prefix in $prefixes {\n            #{$property}: #{$prefix + $value};\n        }\n    }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction: row) {\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n    flex-item-align: stretch;\n    -ms-flex-item-align: stretch;\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n    // if both, min width and width are set, width will win this conflict\n    @if ($width == auto) {\n        @if ($minWidth != 1) {\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n        } @else {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n            // for a discussion auto vs. main-size\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n        }\n    } @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, 0.2)) {\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n    border: 1px solid $color;\n    border-radius: 2px;\n    -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n    -moz-border-radius: $radius * 1px;\n    -webkit-border-radius: $radius * 1px;\n    border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n    @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n    @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n    @return calc(($colWidth * 100 / $context) * 1%);\n}\n\n@function remDist($fontSizePx) {\n    @return calc(($fontSizePx / 10) * 1rem);\n}\n\n@function black($alpha: 1) {\n    @return (rgba(0, 0, 0, $alpha));\n}\n\n@function white($alpha: 1) {\n    @return (rgba(255, 255, 255, $alpha));\n}\n\n@mixin font-size($remPx, $important: false) {\n    @if $important == true {\n        font-size: calc(($remPx) * 1px) !important;\n        font-size: calc(($remPx / 10) * 1rem) !important;\n    } @else {\n        font-size: calc(($remPx) * 1px);\n        font-size: calc(($remPx / 10) * 1rem);\n    }\n}\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} {\n        @content;\n    }\n    @-moz-keyframes #{$name} {\n        @content;\n    }\n    @-webkit-keyframes #{$name} {\n        @content;\n    }\n    @keyframes #{$name} {\n        @content;\n    }\n}\n\n@mixin animation($value, $type: '') {\n    $animation: animation;\n    @if $type != '' {\n        $animation: $animation + '-' + $type;\n    }\n    @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type: all, $duration: 0.5s, $effect: ease-out, $delay: 0s) {\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s) {\n    @include keyframes(fade) {\n        0% {\n            opacity: 0;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 0;\n        }\n    }\n\n    @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat() {\n    @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n    @include font-size(20);\n    font-family: $headingFont;\n    font-style: normal;\n}\n\n@mixin disableSelect() {\n    @include vendor-prefix(user-select, none, property);\n}\n\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\n@mixin visuallyHidden() {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(1px, 1px, 1px, 1px);\n    margin: 0;\n    padding: 0;\n}\n\n/*\n * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.\n   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;\n     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.\n */\n@mixin writing-mode-vertical-rl {\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl\")} {\n            @content;\n        }\n    }\n}\n@mixin writing-mode-horizontal-tb {\n    & {\n        @content;\n    }\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl .writing-mode-horizontal-tb\")} {\n            @content;\n        }\n    }\n}\n","/* Do not edit */@mixin tao-icon-setup {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'tao' !important;\n  speak: never;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-restricted { content: \"\\e92c\"; }\n@mixin icon-blocked { content: \"\\e92d\"; }\n@mixin icon-copy { content: \"\\e92b\"; }\n@mixin icon-align-center { content: \"\\e92a\"; }\n@mixin icon-multiple-magicwand { content: \"\\e929\"; }\n@mixin icon-sd-import { content: \"\\e91f\"; }\n@mixin icon-sd-export { content: \"\\e924\"; }\n@mixin icon-browse { content: \"\\e925\"; }\n@mixin icon-minus { content: \"\\e926\"; }\n@mixin icon-plus { content: \"\\e927\"; }\n@mixin icon-sd-save { content: \"\\e928\"; }\n@mixin icon-back-button { content: \"\\e91e\"; }\n@mixin icon-japan-incorrect { content: \"\\e91b\"; }\n@mixin icon-japan-correct { content: \"\\e91c\"; }\n@mixin icon-japan-partial { content: \"\\e91d\"; }\n@mixin icon-score-partial { content: \"\\e91a\"; }\n@mixin icon-furigana { content: \"\\e919\"; }\n@mixin icon-add-subsection { content: \"\\e918\"; }\n@mixin icon-info-bare { content: \"\\e923\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-wrap-inline { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-wrap-right { content: \"\\e917\"; }\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-duplicate { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n","@import \"inc/bootstrap\";\n\n@mixin resource-selector-actions {\n    display: inline-block;\n    width: 40px;\n    height: 40px;\n    padding: 10px 0 0 12px;\n    color: $textColor;\n    border-left: solid 1px $uiGeneralContentBg;\n    text-shadow: 0 0 0 transparent;\n    text-decoration: none;\n\n    &:hover, &.active {\n        color: $uiClickableHoverBg;\n        @include transition(color, 200ms, linear);\n    }\n}\n\n.resource-selector{\n    position: relative;\n    height: 100%;\n\n    @include flex-container(nowrap, column);\n    opacity: 0;\n\n\n    background-color: $uiClickableDefaultBg;\n    @include simple-border;\n\n    &.rendered {\n        opacity: 1;\n        @include transition(opacity, 300ms, linear);\n    }\n\n    @import \"resource-list\";\n    @import \"resource-tree\";\n    @import \"filters\";\n\n    nav {\n        height: 40px;\n        @include vendor-prefix(flex, 0 1 40px, property, (-ms-, -webkit-, ''));\n        border-top: solid 1px $uiGeneralContentBorder;\n    }\n\n    .context {\n        @include flex-container(nowrap, row);\n        padding-right: 16px;\n\n        .class-context {\n            @include simple-flex-box;\n            overflow : hidden;\n\n            .class-selector{\n                position: static;\n                .options {\n                    max-height: calc(100% - 120px);\n                    &.folded {\n                        max-height: 0;\n                    }\n                }\n            }\n        }\n\n        & > a {\n            @include resource-selector-actions;\n        }\n    }\n\n    .selection {\n\n        @include flex-container(nowrap, row);\n        padding-right: 16px;\n\n        .selection-control {\n\n            @include vendor-prefix(flex, 0 0 80px, property, (-ms-, -webkit-, ''));\n\n            & > label {\n                @include resource-selector-actions;\n                width: 36px;\n                padding: 10px 0 0 8px;\n                margin: 0;\n            }\n            & > a {\n                @include resource-selector-actions;\n                width: 38px;\n            }\n            .selection-toggle .icon-multi-select:before {\n                @include font-size(16);\n            }\n            .selection-toggle.hidden{\n                display: inline-block !important;\n                visibility: hidden;\n            }\n        }\n        .search {\n            @include simple-flex-box;\n            position: relative;\n\n            padding : 6px 6px 6px 5px;\n\n            &:before {\n                @include tao-icon-setup;\n                @include icon-find;\n                position: absolute;\n                left: 12px;\n                top: 12px;\n                opacity: .4;\n            }\n            input {\n                @include border-radius(2);\n                max-width: inherit;\n                width: 100%;\n                padding: 4px 25px;\n            }\n\n            & > a.filters-opener {\n                position: absolute;\n                right: 12px;\n                top: 10px;\n\n                @include font-size(16);\n                text-decoration: none;\n            }\n        }\n        .filters-container {\n            position: absolute;\n            width: 100%;\n            background-color: $uiClickableDefaultBg;\n            border: solid 1px $uiGeneralContentBorder;\n            @include border-radius-bottom(3);\n            @include box-shadow;\n            left: 0;\n            top: 80px;\n            overflow-y: auto;\n            z-index: 100;\n            max-height: calc(100% - 110px);\n            @include transition(max-height, 300ms, ease);\n\n            &.folded {\n                overflow: hidden;\n                max-height: 0;\n                border-width: 0;\n                @include transition(max-height, 300ms, ease);\n            }\n        }\n    }\n\n    main {\n        @include simple-flex-box;\n\n        min-height: 150px;\n\n        border-top: solid 1px $uiGeneralContentBorder;\n        background-color: $uiGeneralContentBg;\n        height: 100%;\n        overflow-y: scroll;\n\n        .no-results {\n            display:inline-block;\n            width: 100%;\n            text-align:center;\n            margin: 10px auto;\n            opacity: .75;\n        }\n\n        .more {\n            height: 45px;\n            padding: 10px;\n        }\n\n        &.loading .more {\n            opacity: 0.65;\n            cursor : inherit;\n        }\n    }\n\n    footer {\n        height: 30px;\n        @include vendor-prefix(flex, 0 1 30px, property, (-ms-, -webkit-, ''));\n        border-top: solid 1px $uiGeneralContentBorder;\n\n        background-color: $uiClickableDefaultBg;\n        text-align: center;\n        padding: 5px;\n    }\n}\n","@import \"inc/bootstrap\";\n\n@mixin resource-selector-actions {\n    display: inline-block;\n    width: 40px;\n    height: 40px;\n    padding: 10px 0 0 12px;\n    color: $textColor;\n    border-left: solid 1px $uiGeneralContentBg;\n    text-shadow: 0 0 0 transparent;\n    text-decoration: none;\n\n    &:hover, &.active {\n        color: $uiClickableHoverBg;\n        @include transition(color, 200ms, linear);\n    }\n}\n\n.resource-selector{\n    position: relative;\n    height: 100%;\n\n    @include flex-container(nowrap, column);\n    opacity: 0;\n\n\n    background-color: $uiClickableDefaultBg;\n    @include simple-border;\n\n    &.rendered {\n        opacity: 1;\n        @include transition(opacity, 300ms, linear);\n    }\n\n    @import \"resource-list\";\n    @import \"resource-tree\";\n    @import \"filters\";\n\n    nav {\n        height: 40px;\n        @include vendor-prefix(flex, 0 1 40px, property, (-ms-, -webkit-, ''));\n        border-top: solid 1px $uiGeneralContentBorder;\n    }\n\n    .context {\n        @include flex-container(nowrap, row);\n        padding-right: 16px;\n\n        .class-context {\n            @include simple-flex-box;\n            overflow : hidden;\n\n            .class-selector{\n                position: static;\n                .options {\n                    max-height: calc(100% - 120px);\n                    &.folded {\n                        max-height: 0;\n                    }\n                }\n            }\n        }\n\n        & > a {\n            @include resource-selector-actions;\n        }\n    }\n\n    .selection {\n\n        @include flex-container(nowrap, row);\n        padding-right: 16px;\n\n        .selection-control {\n\n            @include vendor-prefix(flex, 0 0 80px, property, (-ms-, -webkit-, ''));\n\n            & > label {\n                @include resource-selector-actions;\n                width: 36px;\n                padding: 10px 0 0 8px;\n                margin: 0;\n            }\n            & > a {\n                @include resource-selector-actions;\n                width: 38px;\n            }\n            .selection-toggle .icon-multi-select:before {\n                @include font-size(16);\n            }\n            .selection-toggle.hidden{\n                display: inline-block !important;\n                visibility: hidden;\n            }\n        }\n        .search {\n            @include simple-flex-box;\n            position: relative;\n\n            padding : 6px 6px 6px 5px;\n\n            &:before {\n                @include tao-icon-setup;\n                @include icon-find;\n                position: absolute;\n                left: 12px;\n                top: 12px;\n                opacity: .4;\n            }\n            input {\n                @include border-radius(2);\n                max-width: inherit;\n                width: 100%;\n                padding: 4px 25px;\n            }\n\n            & > a.filters-opener {\n                position: absolute;\n                right: 12px;\n                top: 10px;\n\n                @include font-size(16);\n                text-decoration: none;\n            }\n        }\n        .filters-container {\n            position: absolute;\n            width: 100%;\n            background-color: $uiClickableDefaultBg;\n            border: solid 1px $uiGeneralContentBorder;\n            @include border-radius-bottom(3);\n            @include box-shadow;\n            left: 0;\n            top: 80px;\n            overflow-y: auto;\n            z-index: 100;\n            max-height: calc(100% - 110px);\n            @include transition(max-height, 300ms, ease);\n\n            &.folded {\n                overflow: hidden;\n                max-height: 0;\n                border-width: 0;\n                @include transition(max-height, 300ms, ease);\n            }\n        }\n    }\n\n    main {\n        @include simple-flex-box;\n\n        min-height: 150px;\n\n        border-top: solid 1px $uiGeneralContentBorder;\n        background-color: $uiGeneralContentBg;\n        height: 100%;\n        overflow-y: scroll;\n\n        .no-results {\n            display:inline-block;\n            width: 100%;\n            text-align:center;\n            margin: 10px auto;\n            opacity: .75;\n        }\n\n        .more {\n            height: 45px;\n            padding: 10px;\n        }\n\n        &.loading .more {\n            opacity: 0.65;\n            cursor : inherit;\n        }\n    }\n\n    footer {\n        height: 30px;\n        @include vendor-prefix(flex, 0 1 30px, property, (-ms-, -webkit-, ''));\n        border-top: solid 1px $uiGeneralContentBorder;\n\n        background-color: $uiClickableDefaultBg;\n        text-align: center;\n        padding: 5px;\n    }\n}\n","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n$textSecondary: #737373;\n$shadowColor: rgba(0, 0, 0, 0.25);\n\n$modalBorderColor: #dddfe2;\n$searchInp: #dddfe2;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorBrand: #266d9c;\n$colorBrandLight: #e4ecef;\n$colorGsDark: #121212; //color ported from nextgen TAO design system\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n",".resource-list {\n    position: relative;\n    height: 100%;\n\n    opacity : 0;\n    &.rendered {\n        opacity: 1;\n        @include transition(opacity, 300ms, linear);\n    }\n\n    &.multiple ul li a:after{\n        display: block;\n        @include transition(all, 200ms, linear);\n    }\n\n    &.multiple ul li[data-access=\"denied\"] a:after {\n        display: none;\n    }\n\n    ul {\n        list-style-type: none;\n        padding: 0;\n        margin: 0;\n\n        li {\n            position: relative;\n            height: 40px;\n            padding: 10px;\n            border-bottom: solid 1px $uiGeneralContentBorder;\n\n            @include transition(background-color, 200ms, linear);\n\n            a {\n                @include transition(color, 200ms, linear);\n                color: $textColor;\n                display: inline-block;\n                width: 100%;\n                padding-right: 25px;\n                overflow: hidden;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n\n                &:after {\n                    @include tao-icon-setup;\n                    @include icon-checkbox;\n                    color: $info;\n                    position: absolute;\n                    right: 17px;\n                    top: 12px;\n                    display: none;\n                }\n                &:hover {\n                    text-decoration: none;\n                }\n\n                & > span {\n                    color: $info;\n                    margin-right: 4px;\n                    @include font-size(16);\n                    vertical-align: top;\n                }\n            }\n\n            &.selected, &:hover {\n                background-color: $uiClickableHoverBg;\n                cursor: pointer;\n                @include transition(background-color, 200ms, linear);\n                a {\n                    color: $textHighlight;\n                    @include transition(color, 200ms, linear);\n\n                    &:after {\n                        color: $textHighlight;\n                    }\n                    & > span {\n                        color: $textHighlight;\n                    }\n                }\n            }\n            &.selected a:after {\n                @include icon-checkbox-checked;\n            }\n\n            &[data-access=denied] > a, &[data-access=partial] > a {\n                [class^=\"icon-\"], [class*=\" icon-\"] {\n                    position: relative;\n                    &:after {\n                        @include icon-lock;\n                        color: #555;\n                        position: absolute;\n                        left: 7px;\n                        top: 6px;\n                    }\n                }\n            }\n            &[data-access=denied] {\n                color: $uiClickableActiveBg;\n                background-color: $textHighlight;\n                &:hover, &:hover > a, & > a, [class^=\"icon-\"]:before, [class*=\" icon-\"]:before  {\n                    cursor: auto;\n                    background-color: $textHighlight;\n                    color: $uiClickableActiveBg !important;\n                }\n            }\n        }\n    }\n}\n",".resource-tree{\n    $nodeHeight: 40px;\n    $actionWidth: 25px;\n    $hoverWidth: $nodeHeight - 15px;\n\n    position: relative;\n    height: 100%;\n    opacity : 0;\n    &.rendered {\n        opacity: 1;\n        @include transition(opacity, 300ms, linear);\n    }\n\n    &.multiple ul li.selectable {\n        & > a > .selector {\n            display: inline-block;\n        }\n    }\n\n    &.multiple ul li.instance[data-access=\"denied\"] a .selector {\n        display: none;\n    }\n\n    .clickable {\n        &:hover {\n            &:before {\n                content: \" \";\n                display: inline-block;\n                position: absolute;\n                width: $hoverWidth;\n                height: $hoverWidth;\n                top: 7.5px;\n                left: 0;\n                border-radius: 50%;\n                background-color: blacken($uiSelectableHoverBg, .2);\n                opacity: .5;\n            }\n        }\n        &:focus {\n            outline: 0 none;\n        }\n    }\n\n    ul {\n        list-style-type: none;\n        padding: 0;\n        margin: 0;\n\n        li {\n            position: relative;\n            cursor: pointer;\n\n            & > a {\n                height: $nodeHeight;\n                line-height: $nodeHeight;\n                display: block;\n                width: 100%;\n                padding-right: 30px;\n                overflow: hidden;\n                white-space: nowrap;\n                text-overflow: ellipsis;\n                border-bottom: solid 1px $uiGeneralContentBorder;\n                color : $textColor;\n            }\n            &.class {\n                .class-toggler {\n                    display: inline-block;\n                    position: relative;\n                    width: $actionWidth;\n                    height: $nodeHeight;\n                    text-align: center;\n                    &:after {\n                        @include tao-icon-setup;\n                        @include icon-down;\n                        @include font-size(15);\n                        position: relative;\n                    }\n                }\n                &.empty .class-toggler{\n                    visibility: hidden;\n                }\n                & > a {\n                    & > .icon-folder:before {\n                        @include icon-folder-open;\n                        color: $warning;\n                        margin-right: 4px;\n                    }\n                    &:hover {\n                        background-color: $uiSelectableHoverBg;\n                        color : $textColor;\n                        @include transition(all, 200ms, linear);\n                    }\n                }\n\n                &.selected {\n                    & > a {\n                        background-color: $uiSelectableSelectedBg;\n                        color: $textHighlight;\n                        &:before, &:after {\n                            color: $textHighlight;\n                        }\n                        @include transition(all, 200ms, linear);\n\n                        &:hover {\n                            background-color: $uiSelectableSelectedHoverBg;\n                            @include transition(all, 200ms, linear);\n                        }\n                        .clickable:hover:before {\n                            background-color: whiten($uiSelectableSelectedHoverBg, .2);\n                        }\n                    }\n                }\n                &.closed {\n                    & > a > .class-toggler:after {\n                        @include icon-right;\n                    }\n                    & > a > .icon-folder:before {\n                        @include icon-folder;\n                    }\n                    & > ul {\n                        display: none;\n                    }\n                }\n            }\n            &.instance {\n                & > a > [class^=\"icon-\"], & > a > [class*=\" icon-\"] {\n                    color: $info;\n                    margin-right: 4px;\n                    margin-left: $actionWidth;\n                    @include font-size(16);\n                }\n                &:hover {\n                    background-color: $uiSelectableHoverBg;\n                    color : $textColor;\n                    @include transition(all, 200ms, linear);\n                }\n                &.selected {\n                    background-color: $uiSelectableSelectedBg;\n                    & > a, & > a > [class^=\"icon-\"], & > a > [class*=\" icon-\"] {\n                        color: $textHighlight;\n                    }\n                    @include transition(all, 200ms, linear);\n\n                    &:hover {\n                        background-color: $uiSelectableSelectedHoverBg;\n                        @include transition(all, 200ms, linear);\n                    }\n                    .clickable:hover:before {\n                        background-color: whiten($uiSelectableSelectedHoverBg, .2);\n                    }\n                }\n            }\n            & > a > .selector {\n                display: none;\n                position: absolute;\n                top: 0;\n                right: 8px;\n                line-height: $nodeHeight;\n                height: $nodeHeight;\n                width: $actionWidth;\n                text-align:center;\n\n                &:after {\n                    @include transition(all, 200ms, linear);\n                    @include tao-icon-setup;\n                    @include icon-checkbox;\n                    @include font-size(15);\n                    color: $info;\n                    line-height: $nodeHeight;\n                    position: relative;\n                }\n            }\n            &.selected > a > .selector:after {\n                @include icon-checkbox-checked;\n            }\n            &.selected > a > .selector:after, &.selected > a:hover > .selector:after {\n                color: $textHighlight;\n            }\n            &[data-access=denied] > a, &[data-access=partial] > a {\n                [class^=\"icon-\"], [class*=\" icon-\"] {\n                    position: relative;\n                    &:after {\n                        @include icon-lock;\n                        color: #555;\n                        position: absolute;\n                        left: 7px;\n                        top: 6px;\n                    }\n                }\n            }\n            &[data-access=denied] {\n                color: $uiClickableActiveBg;\n                background-color: $textHighlight;\n                &:hover, &:hover > a, & > a, [class^=\"icon-\"]:before, [class*=\" icon-\"]:before  {\n                    cursor: auto;\n                    background-color: $textHighlight;\n                    color: $uiClickableActiveBg !important;\n                }\n            }\n            a:hover {\n                text-decoration: none;\n            }\n        }\n    }\n}\n",".filters {\n    position: relative;\n    height: 100%;\n    opacity : 0;\n    &.rendered {\n        opacity: 1;\n        @include transition(opacity, 300ms, linear);\n    }\n\n    .ui-generis-form {\n        margin: 0;\n        padding: 10px;\n        width: 100%;\n        background-color: $uiClickableDefaultBg;\n        border: none;\n        h2 {\n            margin: 0;\n        }\n        .left {\n            width: 100%;\n        }\n        .toolbar {\n            margin: 0;\n        }\n    }\n}\n"]}

package/src/resourcemgr/assetSearch.js

@@ -40,7 +40,8 @@ import {
     buildSearchRequestParams,
     canSubmitScopedAssetSearch,
     isBrowseShapedSearchPayload,
-    normalizeSearchResponse
+    normalizeSearchResponse,
+    resolveServiceUnavailableSearchMessage
 } from 'ui/resourcemgr/assetSearchContract';
 import 'ui/searchModal/css/advancedSearch.css';
 
@@ -99,7 +100,6 @@ export default function assetSearch(options) {
     const $error = $('.asset-search-error', $fileSelector);
     const $errorMessage = $('.asset-search-error-message', $error);
     const $retry = $('.asset-search-retry', $error);
-    const $resultsRegion = $('.files-wrapper', $fileSelector);
     const $paginationContainer = $('.pagination-bottom', $container);
     const $uploadSwitcher = $('.upload-switcher', $fileSelector);
     const $modalTitle = $container.closest('.resourcemgr').find('> h2').first();
@@ -177,8 +177,9 @@ export default function assetSearch(options) {
      * Keeps the previous display name until a real label arrives (avoids URI flash).
      * @param {string} [folderLabel]
      * @param {Object} [content]
+     * @param {boolean} [includesSubfolders]
      */
-    function updateScopeDisplay(folderLabel, content) {
+    function updateScopeDisplay(folderLabel, content, includesSubfolders) {
         if (isFolderDisplayLabel(folderLabel)) {
             scopeLabel = String(folderLabel).trim();
         }
@@ -189,7 +190,9 @@ export default function assetSearch(options) {
         } else {
             $scopeName.removeAttr('title');
         }
-        if (folderHasSubfolders(content)) {
+        const showSubfolders =
+            includesSubfolders !== false && folderHasSubfolders(content);
+        if (showSubfolders) {
             $scopeSubfolders.removeClass('hidden').removeAttr('hidden');
         } else {
             $scopeSubfolders.addClass('hidden').attr('hidden', 'hidden');
@@ -500,6 +503,7 @@ export default function assetSearch(options) {
      * Detach asset-search handlers and destroy Advanced Search.
      */
     function teardown() {
+        setResultsTableLoading(false);
         requestSeq += 1;
         searchMode = false;
         $fileSelector.removeClass('search-mode');
@@ -637,6 +641,7 @@ export default function assetSearch(options) {
         if ($modalTitle.length && browseModalTitle) {
             $modalTitle.text(browseModalTitle);
         }
+        setResultsTableLoading(false);
         hideLoading();
         hideError();
         $paginationContainer.empty();
@@ -648,9 +653,13 @@ export default function assetSearch(options) {
     }
 
     /**
-     * Execute the scoped search request.
-     * @param {{quiet?: boolean}} [runOptions]
+     * Toggle the file-table loading overlay during search (including pagination).
+     * @param {Boolean} loading
      */
+    function setResultsTableLoading(loading) {
+        $container.trigger(`searchtableloading.${ns}`, [!!loading]);
+    }
+
     function runSearch(runOptions) {
         if (!hasActiveSearch()) {
             exitSearchMode();
@@ -659,9 +668,8 @@ export default function assetSearch(options) {
 
         const quiet = Boolean(runOptions && runOptions.quiet);
         const seq = ++requestSeq;
-        if (quiet) {
-            $resultsRegion.attr('aria-busy', 'true');
-        } else {
+        setResultsTableLoading(true);
+        if (!quiet) {
             showLoading();
         }
         hideError();
@@ -688,9 +696,8 @@ export default function assetSearch(options) {
                 if (seq !== requestSeq) {
                     return;
                 }
-                if (quiet) {
-                    $resultsRegion.attr('aria-busy', 'false');
-                } else {
+                setResultsTableLoading(false);
+                if (!quiet) {
                     hideLoading();
                 }
                 let normalized = normalizeSearchResponse(response);
@@ -719,6 +726,7 @@ export default function assetSearch(options) {
                 total = normalized.total;
                 page = normalized.page;
                 pageSize = normalized.pageSize;
+                updateScopeDisplay(scopeLabel, null, normalized.includesSubfolders);
 
                 let emptyMessage = '';
                 if (normalized.total === 0) {
@@ -749,19 +757,21 @@ export default function assetSearch(options) {
 
                 renderPagination();
             })
-            .fail(function () {
+            .fail(function (jqXHR) {
                 if (seq !== requestSeq) {
                     return;
                 }
-                if (quiet) {
-                    $resultsRegion.attr('aria-busy', 'false');
-                } else {
+                setResultsTableLoading(false);
+                if (!quiet) {
                     hideLoading();
                 }
                 page = 1;
                 total = 0;
                 $paginationContainer.empty();
-                const message = __('Unable to search assets. Please try again.');
+                const message = resolveServiceUnavailableSearchMessage(
+                    jqXHR,
+                    __('Unable to search assets. Please try again.')
+                );
                 showError(message);
                 $container.trigger(`searchresults.${ns}`, [
                     {
@@ -813,7 +823,6 @@ export default function assetSearch(options) {
         $searchButton.prop('disabled', true).addClass('is-searching').attr('aria-busy', 'true');
         $searchButtonSpinner.removeClass('hidden');
         $searchButtonLabel.text(__('Searching'));
-        $resultsRegion.attr('aria-busy', 'true');
     }
 
     /**
@@ -824,7 +833,6 @@ export default function assetSearch(options) {
         $searchButton.removeClass('is-searching').attr('aria-busy', 'false');
         $searchButtonSpinner.addClass('hidden');
         $searchButtonLabel.text(__('Search'));
-        $resultsRegion.attr('aria-busy', 'false');
         updateSearchActionState();
     }
 

package/src/resourcemgr/assetSearchContract.js

@@ -54,6 +54,14 @@ export const DEFAULT_PAGE_SIZE = 11;
  */
 export const MIN_TEXT_QUERY_LENGTH = 3;
 
+/**
+ * @param {*} entry
+ * @returns {boolean}
+ */
+function isNonemptyCriterionValue(entry) {
+    return entry !== '' && entry !== null && typeof entry !== 'undefined';
+}
+
 /**
  * Whether a rendered metadata criterion has a usable value.
  * @param {Object} criterion
@@ -70,9 +78,7 @@ export function isMetadataCriterionComplete(criterion) {
         if (!Array.isArray(criterion.value)) {
             return false;
         }
-        return criterion.value.some(function (entry) {
-            return entry !== '' && entry !== null && typeof entry !== 'undefined';
-        });
+        return criterion.value.some(isNonemptyCriterionValue);
     }
     return true;
 }
@@ -190,10 +196,8 @@ export function buildMetadataFromCriteriaState(criteriaState) {
             return;
         }
         if (criterion.type === 'list' && Array.isArray(criterion.value)) {
-            const first = criterion.value.find(function (entry) {
-                return entry !== '' && entry !== null && typeof entry !== 'undefined';
-            });
-            if (typeof first !== 'undefined' && first !== null && first !== '') {
+            const first = criterion.value.find(isNonemptyCriterionValue);
+            if (isNonemptyCriterionValue(first)) {
                 metadata[criterion.propertyUri] = String(first);
             }
         }
@@ -220,6 +224,31 @@ function normalizeMetadataMap(metadata) {
     return normalized;
 }
 
+/**
+ * @param {number} [requestedPageSize]
+ * @param {number} [normalizedPageSize]
+ * @returns {number}
+ */
+function resolveSearchPageSize(requestedPageSize, normalizedPageSize) {
+    const requested = Number(requestedPageSize);
+    if (requested > 0) {
+        return requested;
+    }
+    const fallback = Number(normalizedPageSize);
+    if (fallback > 0) {
+        return fallback;
+    }
+    return DEFAULT_PAGE_SIZE;
+}
+
+/**
+ * @param {{field: string, direction: string}} [sort]
+ * @returns {{field: string, direction: string}}
+ */
+function mergeSortWithDefaults(sort) {
+    return Object.assign({}, DEFAULT_SORT, sort || {});
+}
+
 /**
  * Normalize a search service payload into a stable picker shape.
  *
@@ -250,10 +279,37 @@ export function normalizeSearchResponse(payload) {
         items,
         total,
         page: Number.isFinite(page) && page > 0 ? page : 1,
-        pageSize: Number.isFinite(pageSize) && pageSize > 0 ? pageSize : DEFAULT_PAGE_SIZE
+        pageSize: Number.isFinite(pageSize) && pageSize > 0 ? pageSize : DEFAULT_PAGE_SIZE,
+        includesSubfolders: body.includesSubfolders !== false
     };
 }
 
+/**
+ * Prefer a server-provided 503 message when the search service is unavailable.
+ *
+ * @param {*} jqXHR
+ * @param {string} fallbackMessage
+ * @returns {string}
+ */
+export function resolveServiceUnavailableSearchMessage(jqXHR, fallbackMessage) {
+    if (!jqXHR || jqXHR.status !== 503) {
+        return fallbackMessage;
+    }
+    let body = jqXHR.responseJSON;
+    if (!body && jqXHR.responseText) {
+        try {
+            body =
+                typeof jqXHR.responseText === 'string' ? JSON.parse(jqXHR.responseText) : jqXHR.responseText;
+        } catch (err) {
+            body = null;
+        }
+    }
+    if (body && body.message) {
+        return body.message;
+    }
+    return fallbackMessage;
+}
+
 /**
  * Browse (`ItemContent/files`) responses use `children` and ignore `query`.
  * Real search responses expose `items`.
@@ -281,11 +337,8 @@ export function isBrowseShapedSearchPayload(payload) {
  */
 export function applyLocalSearchFallback(normalized, options) {
     const metadata = normalizeMetadataMap(options && options.metadata);
+    const pageSize = resolveSearchPageSize(options && options.pageSize, normalized.pageSize);
     if (Object.keys(metadata).length) {
-        const pageSize =
-            Number(options && options.pageSize) > 0
-                ? Number(options.pageSize)
-                : normalized.pageSize || DEFAULT_PAGE_SIZE;
         return {
             items: [],
             total: 0,
@@ -298,11 +351,7 @@ export function applyLocalSearchFallback(normalized, options) {
     const query = String((options && options.query) || '')
         .trim()
         .toLowerCase();
-    const sort = (options && options.sort) || DEFAULT_SORT;
-    const pageSize =
-        Number(options && options.pageSize) > 0
-            ? Number(options.pageSize)
-            : normalized.pageSize || DEFAULT_PAGE_SIZE;
+    const sort = mergeSortWithDefaults(options && options.sort);
     const page = Number(options && options.page) > 0 ? Number(options.page) : 1;
 
     let items = (normalized.items || []).filter(isSearchableAsset);
@@ -440,7 +489,7 @@ function matchesQueryTokens(haystackText, queryTokens) {
  * @returns {Array}
  */
 export function sortAssetItems(items, sort) {
-    const resolved = Object.assign({}, DEFAULT_SORT, sort || {});
+    const resolved = mergeSortWithDefaults(sort);
     return (items || []).slice().sort(function (a, b) {
         const primary = compareSortValues(
             getSortValue(a, resolved.field),