@oat-sa/tao-core-ui 3.16.1 → 3.16.2

package/dist/waitingDialog/css/waitingDialog.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../scss/inc/_functions.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../scss/waitingDialog.scss%23sass","../scss/waitingDialog.scss"],"names":[],"mappings":"AAaA;;;;;;CAAA;AAmQA,oEAAA;AChRA,gBAAA;ACIQ;EACI,iBAAA;ACMZ;ADJQ;EAEI,WAAA;EACA,kBAAA;ACKZ;ADJY;EAEI,wCAAA;EACA,sBAAA;EACA,qBAAA;EACA,4BAAA;EACA,4BAAA;EACA,oBAAA;ACKhB;ADHY;EACI,cAAA;EACA,eAAA;EFiMR,eAAA;EACA,iBAAA;AG3LR;ADHQ;EF6LA,eAAA;EACA,iBAAA;EGvLR,cAAA;EDJY,kBAAA;EACA,kBAAA;ACMZ","file":"waitingDialog.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    }\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\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        }\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    }\n    @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(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    }\n    @else {\n        font-size: calc(($remPx) * 1px);\n        font-size: calc(($remPx / 10) * 1rem);\n    }\n}\n\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} { @content };\n    @-moz-keyframes #{$name} { @content };\n    @-webkit-keyframes #{$name} { @content };\n    @keyframes #{$name} { @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\n    @include keyframes(fade) {\n        0%   {opacity:0;}\n        50%   {opacity:1;}\n        100% {opacity:0;}\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","/* 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.modal {\n    &.has-secondary {\n        .message {\n            font-weight: bold;\n        }\n        .buttons {\n            // override traditional button layout\n            width: 100%;\n            text-align: center;\n            button.waiting:disabled {\n                // override traditional disabled button style\n                background-color: transparent !important;\n                color: $textColor !important;\n                opacity: 1 !important;\n                font-size: 1.6rem !important;\n                text-shadow: none !important;\n                text-transform: none;\n            }\n            .between-buttons-text {\n                color: whiten($textColor, .4);\n                padding: 0 1rem;\n                @include font-size(12);\n            }\n        }\n        .button-subtext {\n            @include font-size(11);\n            color: whiten($textColor, .4);\n            text-align: center;\n            margin-top: 1.5rem;\n        }\n    }\n}\n","@import \"inc/bootstrap\";\n\n.modal {\n    &.has-secondary {\n        .message {\n            font-weight: bold;\n        }\n        .buttons {\n            // override traditional button layout\n            width: 100%;\n            text-align: center;\n            button.waiting:disabled {\n                // override traditional disabled button style\n                background-color: transparent !important;\n                color: $textColor !important;\n                opacity: 1 !important;\n                font-size: 1.6rem !important;\n                text-shadow: none !important;\n                text-transform: none;\n            }\n            .between-buttons-text {\n                color: whiten($textColor, .4);\n                padding: 0 1rem;\n                @include font-size(12);\n            }\n        }\n        .button-subtext {\n            @include font-size(11);\n            color: whiten($textColor, .4);\n            text-align: center;\n            margin-top: 1.5rem;\n        }\n    }\n}\n"]}
+{"version":3,"sources":["../../../scss/inc/_functions.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../scss/waitingDialog.scss%23sass","../scss/waitingDialog.scss"],"names":[],"mappings":"AAaA;;;;;;CAAA;AAwQA,oEAAA;AAWA;;;;EAAA;AChSA,gBAAA;ACIQ;EACI,iBAAA;ACWZ;ADTQ;EAEI,WAAA;EACA,kBAAA;ACUZ;ADTY;EAEI,wCAAA;EACA,sBAAA;EACA,qBAAA;EACA,4BAAA;EACA,4BAAA;EACA,oBAAA;ACUhB;ADRY;EACI,cAAA;EACA,eAAA;EF2LR,eAAA;EGhLR,iBAAA;AACA;ADRQ;EFuLA,eAAA;EACA,iBAAA;EEtLI,cAAA;EACA,kBAAA;EACA,kBAAA;ACWZ","file":"waitingDialog.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.modal {\n    &.has-secondary {\n        .message {\n            font-weight: bold;\n        }\n        .buttons {\n            // override traditional button layout\n            width: 100%;\n            text-align: center;\n            button.waiting:disabled {\n                // override traditional disabled button style\n                background-color: transparent !important;\n                color: $textColor !important;\n                opacity: 1 !important;\n                font-size: 1.6rem !important;\n                text-shadow: none !important;\n                text-transform: none;\n            }\n            .between-buttons-text {\n                color: whiten($textColor, .4);\n                padding: 0 1rem;\n                @include font-size(12);\n            }\n        }\n        .button-subtext {\n            @include font-size(11);\n            color: whiten($textColor, .4);\n            text-align: center;\n            margin-top: 1.5rem;\n        }\n    }\n}\n","@import \"inc/bootstrap\";\n\n.modal {\n    &.has-secondary {\n        .message {\n            font-weight: bold;\n        }\n        .buttons {\n            // override traditional button layout\n            width: 100%;\n            text-align: center;\n            button.waiting:disabled {\n                // override traditional disabled button style\n                background-color: transparent !important;\n                color: $textColor !important;\n                opacity: 1 !important;\n                font-size: 1.6rem !important;\n                text-shadow: none !important;\n                text-transform: none;\n            }\n            .between-buttons-text {\n                color: whiten($textColor, .4);\n                padding: 0 1rem;\n                @include font-size(12);\n            }\n        }\n        .button-subtext {\n            @include font-size(11);\n            color: whiten($textColor, .4);\n            text-align: center;\n            margin-top: 1.5rem;\n        }\n    }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.16.1",
+    "version": "3.16.2",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

package/scss/inc/_base.scss

@@ -512,7 +512,7 @@ body {
     .txt-strike {
         text-decoration: line-through;
     }
-    
+
     .qti-item ruby rt {
         span {
             &.txt-underline,
@@ -525,33 +525,85 @@ body {
         }
     }
 
+    .writing-mode-horizontal-tb {
+        writing-mode: horizontal-tb;
+    }
+
     .writing-mode-vertical-rl {
-        text-underline-position: right;
-        .txt-dashed,
-        .txt-underline {
-            text-underline-offset: 0.1em;
-        }
-        .txt-subscript {
+        writing-mode: vertical-rl;
+    }
+
+    .txt-subscript {
+        @include writing-mode-vertical-rl {
             inset-block-start: -0.9em;
             bottom: 0;
         }
-        .txt-superscript {
+        @include writing-mode-horizontal-tb {
+            inset-block-start: auto;
+            bottom: auto;
+        }
+    }
+    .txt-superscript {
+        @include writing-mode-vertical-rl {
             inset-block-end: -0.4em;
             top: 0;
         }
-        .txt-underline,
-        .txt-dashed,
-        .txt-wavy {
-            ruby rt {
-                position: relative;
-                inset-block-start: -0.8em;
+        @include writing-mode-horizontal-tb {
+            inset-block-end: auto;
+            top: auto;
+        }
+    }
+
+    .txt-underline,
+    .txt-dashed,
+    .txt-wavy {
+        @include writing-mode-vertical-rl {
+            text-underline-position: right;
+        }
+        @include writing-mode-horizontal-tb {
+            text-underline-position: auto;
+        }
+    }
+
+    .txt-underline,
+    .txt-dashed {
+        ruby rt {
+            position: relative;
+            @include writing-mode-vertical-rl {
+                inset-block-start: -0.3em;
+            }
+            @include writing-mode-horizontal-tb {
+                inset-block-start: auto;
+            }
+        }
+    }
+    .txt-wavy {
+        ruby rt {
+            position: relative;
+            @include writing-mode-vertical-rl {
+                inset-block-start: -0.7em;
+            }
+            @include writing-mode-horizontal-tb {
+                inset-block-start: auto;
             }
         }
     }
 
-    .writing-mode-vertical-rl[data-useragent-browser='safari'] .txt-dashed,
-    .txt-underline {
-        text-underline-offset: 0;
+    [data-useragent-browser='safari'] {
+        &.writing-mode-vertical-rl,
+        .writing-mode-vertical-rl {
+            .txt-underline,
+            .txt-dashed {
+                text-underline-offset: -0.1em;
+            }
+        }
+        &,
+        .writing-mode-horizontal-tb {
+            .txt-underline,
+            .txt-dashed {
+                text-underline-offset: auto;
+            }
+        }
     }
 
     .txt-combine-upright-all {

package/scss/inc/_functions.scss

@@ -1,4 +1,4 @@
-@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {
+@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix: '') {
     @each $icon in $iconList {
         #{$prefix}#{$icon} {
             background-position: $x * 1px $y * 1px;
@@ -38,7 +38,7 @@ Usage:
         $css: #{$css + $color + ' ' + $percentage + $units + $sep};
         $percentage: $percentage + $increment;
     }
-    background: linear-gradient( #{$css} );
+    background: linear-gradient(#{$css});
 }
 
 @mixin grid-unit($span, $numCols: 12, $gutter: 0) {
@@ -56,14 +56,13 @@ Usage:
         @each $prefix in $prefixes {
             #{$prefix + $property}: #{$value};
         }
-    }
-    @else if $whatToPrefix == 'value' {
+    } @else if $whatToPrefix == 'value' {
         @each $prefix in $prefixes {
             #{$property}: #{$prefix + $value};
         }
     }
 }
-@mixin flex-container($wrapBehavior: nowrap, $direction : row) {
+@mixin flex-container($wrapBehavior: nowrap, $direction: row) {
     @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));
 
     @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));
@@ -77,7 +76,6 @@ Usage:
 }
 
 @mixin simple-flex-box($width: auto, $minWidth: 1) {
-
     @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));
     flex-item-align: stretch;
     -ms-flex-item-align: stretch;
@@ -87,21 +85,18 @@ Usage:
     @if ($width == auto) {
         @if ($minWidth != 1) {
             @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));
-        }
-        @else {
+        } @else {
             @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));
             // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values
             // for a discussion auto vs. main-size
             @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));
         }
-    }
-    @else {
+    } @else {
         @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));
     }
 }
 
-
-@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {
+@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, 0.2)) {
     @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);
 }
 
@@ -154,21 +149,21 @@ Usage:
 }
 
 @mixin border-radius-top-left($radius: 2) {
-  -webkit-border-top-left-radius: $radius * 1px;
-  -moz-border-radius-topleft: $radius * 1px;
-  border-top-left-radius: $radius * 1px;
+    -webkit-border-top-left-radius: $radius * 1px;
+    -moz-border-radius-topleft: $radius * 1px;
+    border-top-left-radius: $radius * 1px;
 }
 
 @mixin border-radius-top-right($radius: 2) {
-  -webkit-border-top-right-radius: $radius * 1px;
-  -moz-border-radius-topright: $radius * 1px;
-  border-top-right-radius: $radius * 1px;
+    -webkit-border-top-right-radius: $radius * 1px;
+    -moz-border-radius-topright: $radius * 1px;
+    border-top-right-radius: $radius * 1px;
 }
 
 @mixin border-radius-bottom-right($radius: 2) {
-  -webkit-border-bottom-right-radius: $radius * 1px;
-  -moz-border-radius-bottomright: $radius * 1px;
-  border-bottom-right-radius: $radius * 1px;
+    -webkit-border-bottom-right-radius: $radius * 1px;
+    -moz-border-radius-bottomright: $radius * 1px;
+    border-bottom-right-radius: $radius * 1px;
 }
 
 @mixin border-radius-bottom-left($radius: 2) {
@@ -192,45 +187,50 @@ Usage:
 }
 
 @function widthPerc($colWidth, $context) {
-    @return calc(($colWidth * 100 / $context) * 1%)
+    @return calc(($colWidth * 100 / $context) * 1%);
 }
 
 @function remDist($fontSizePx) {
-    @return calc(($fontSizePx / 10) * 1rem)
+    @return calc(($fontSizePx / 10) * 1rem);
 }
 
 @function black($alpha: 1) {
-    @return (rgba(0, 0, 0, $alpha))
+    @return (rgba(0, 0, 0, $alpha));
 }
 
 @function white($alpha: 1) {
-    @return (rgba(255, 255, 255, $alpha))
+    @return (rgba(255, 255, 255, $alpha));
 }
 
 @mixin font-size($remPx, $important: false) {
     @if $important == true {
         font-size: calc(($remPx) * 1px) !important;
         font-size: calc(($remPx / 10) * 1rem) !important;
-    }
-    @else {
+    } @else {
         font-size: calc(($remPx) * 1px);
         font-size: calc(($remPx / 10) * 1rem);
     }
 }
 
-
 @mixin keyframes($name) {
-    @-o-keyframes #{$name} { @content };
-    @-moz-keyframes #{$name} { @content };
-    @-webkit-keyframes #{$name} { @content };
-    @keyframes #{$name} { @content };
+    @-o-keyframes #{$name} {
+        @content;
+    }
+    @-moz-keyframes #{$name} {
+        @content;
+    }
+    @-webkit-keyframes #{$name} {
+        @content;
+    }
+    @keyframes #{$name} {
+        @content;
+    }
 }
 
-
-@mixin animation($value, $type:'') {
+@mixin animation($value, $type: '') {
     $animation: animation;
     @if $type != '' {
-        $animation:  $animation + '-' + $type;
+        $animation: $animation + '-' + $type;
     }
     @include vendor-prefix($animation, $value, property);
 }
@@ -241,22 +241,27 @@ Usage:
 /// @param {property} [$type = all] the CSS property to apply the transition to
 /// @param {time} [$duration = .5s] the transition property
 /// @param {timing-function} [$effect = ease-out] the transition property
-@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){
+@mixin transition($type: all, $duration: 0.5s, $effect: ease-out, $delay: 0s) {
     @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);
 }
 
-@mixin fade($duration: 1s){
-
+@mixin fade($duration: 1s) {
     @include keyframes(fade) {
-        0%   {opacity:0;}
-        50%   {opacity:1;}
-        100% {opacity:0;}
+        0% {
+            opacity: 0;
+        }
+        50% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
     }
 
     @include vendor-prefix(animation, fade 1s forwards, property);
 }
 
-@mixin repeat(){
+@mixin repeat() {
     @include animation(infinite, iteration-count);
 }
 
@@ -280,3 +285,26 @@ Usage:
     margin: 0;
     padding: 0;
 }
+
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
+@mixin writing-mode-vertical-rl {
+    @at-root {
+        #{selector-replace(&, $mainContainer, $mainContainer + " .writing-mode-vertical-rl")} {
+            @content;
+        }
+    }
+}
+@mixin writing-mode-horizontal-tb {
+    & {
+        @content;
+    }
+    @at-root {
+        #{selector-replace(&, $mainContainer, $mainContainer + " .writing-mode-vertical-rl .writing-mode-horizontal-tb")} {
+            @content;
+        }
+    }
+}

package/scss/inc/_select2.scss

@@ -1,11 +1,10 @@
 @import 'inc/bootstrap';
 
 .select2-container * {
-    text-decoration: none !important
+    text-decoration: none !important;
 }
 
 .select2-drop {
-
     font-family: $regularFont;
     font-weight: 400;
     //@include font-size(12);
@@ -22,7 +21,6 @@
 }
 
 .select2-container {
-
     margin: 0;
     position: relative;
     display: inline-block;
@@ -255,7 +253,7 @@
 }
 
 .select2-search input.select2-active {
-    background: $uiGeneralContentBg
+    background: $uiGeneralContentBg;
 }
 
 .select2-container-active .select2-choice,
@@ -289,7 +287,7 @@
     position: relative;
     overflow-x: hidden;
     overflow-y: auto;
-    font-size: inherit
+    font-size: inherit;
 }
 
 .select2-results ul.select2-result-sub {
@@ -298,31 +296,61 @@
 }
 
 .select2-results ul.select2-result-sub > li .select2-result-label {
-    padding-left: 20px
+    padding-left: 20px;
 }
 
 .select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-    padding-left: 40px
+    padding-left: 40px;
 }
 
 .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-    padding-left: 60px
-}
-
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-    padding-left: 80px
-}
-
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-    padding-left: 100px
-}
-
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-    padding-left: 110px
-}
-
-.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label {
-    padding-left: 120px
+    padding-left: 60px;
+}
+
+.select2-results
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    > li
+    .select2-result-label {
+    padding-left: 80px;
+}
+
+.select2-results
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    > li
+    .select2-result-label {
+    padding-left: 100px;
+}
+
+.select2-results
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    > li
+    .select2-result-label {
+    padding-left: 110px;
+}
+
+.select2-results
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    ul.select2-result-sub
+    > li
+    .select2-result-label {
+    padding-left: 120px;
 }
 
 .select2-results li {
@@ -461,7 +489,6 @@ disabled look for disabled choices in the results dropdown
 .select2-container-multi.select2-container-active .select2-choices {
     border: 1px solid $uiGeneralContentBorder;
     outline: none;
-
 }
 
 .select2-container-multi .select2-choices li {
@@ -517,10 +544,10 @@ disabled look for disabled choices in the results dropdown
     -ms-user-select: none;
     user-select: none;
 
-    background-color: blacken($uiClickableDefaultBg, .1);
+    background-color: blacken($uiClickableDefaultBg, 0.1);
 
     &.partial {
-        background-color: whiten($uiClickableDefaultBg, .6);
+        background-color: whiten($uiClickableDefaultBg, 0.6);
     }
 }
 
@@ -580,14 +607,18 @@ disabled look for disabled choices in the results dropdown
     background-color: $uiClickableDefaultBg;
 }
 
-.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {
+.select2-container-multi.select2-container-disabled
+    .select2-choices
+    .select2-search-choice
+    .select2-search-choice-close {
     display: none;
     background: none;
 }
 
 /* end multiselect */
 
-.select2-offscreen, .select2-offscreen:focus {
+.select2-offscreen,
+.select2-offscreen:focus {
     clip: rect(0 0 0 0) !important;
     width: 1px !important;
     height: 1px !important;
@@ -619,7 +650,7 @@ disabled look for disabled choices in the results dropdown
         pointer-events: none;
         cursor: default;
         color: $textColor;
-        opacity: .55 !important;
+        opacity: 0.55 !important;
 
         .select2-search-field,
         .select2-search-choice-close,
@@ -698,7 +729,7 @@ disabled look for disabled choices in the results dropdown
         border-top-width: 1px;
         border-block-start-width: 0;
     }
-    & .select2-results {
+    &:where(.select2-drop) .select2-results {
         max-height: none;
         max-block-size: 200px;
         margin-block: 4px;
@@ -706,13 +737,13 @@ disabled look for disabled choices in the results dropdown
         overflow-x: auto;
         overflow-y: hidden;
     }
-    & .select2-results .select2-result-label {
+    &:where(.select2-drop) .select2-results .select2-result-label {
         min-height: auto;
         min-block-size: 1em;
         padding-block: 3px 4px;
         padding-inline: 7px;
     }
-    & .select2-results .select2-no-results {
+    &:where(.select2-drop) .select2-results .select2-no-results {
         padding-left: 0;
         padding-inline-start: 7px;
     }