@pnp/spfx-controls-react 4.0.0-beta.1344828 → 4.0.0-beta.3809332

package/lib/controls/filePicker/WebSearchTab/WebSearchTab.module.scss.css

@@ -0,0 +1,653 @@
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
+*/
+/*
+  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license
+*/
+.filePicker {
+  color: inherit;
+}
+
+.filePicker :global(.ms-Panel-commands) {
+  display: none;
+}
+
+.filePicker :global(.ms-Panel-main) {
+  top: 50px;
+  border: none;
+  overflow-y: hidden;
+}
+
+[dir=ltr] .filePicker :global(.ms-Panel-content) {
+  padding-left: 0;
+}
+
+.filePicker :global(.ms-Panel-contentInner) {
+  padding: 0;
+  top: 0;
+  overflow: hidden;
+}
+
+.filePicker :global(.ms-Panel-header) {
+  margin: 0;
+}
+
+.filePicker :global(.ms-Nav-link) {
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  font-weight: 400;
+  box-sizing: border-box;
+  display: block;
+  text-align: center;
+  cursor: pointer;
+  padding-top: 0px;
+  padding-right: 20px;
+  padding-bottom: 0px;
+  padding-left: 15px;
+  height: 36px;
+  color: "[theme:neutralPrimary, default:#323130]";
+  background-color: transparent;
+  width: 100%;
+  line-height: 36px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  outline: transparent;
+  border-width: initial;
+  border-style: none;
+  border-image: initial;
+  text-decoration: none;
+  border-radius: 0px;
+  overflow: hidden;
+  border-color: transparent;
+}
+
+.filePicker :global(.is-selected) :global(.ms-Nav-link) {
+  position: relative;
+  -webkit-font-smoothing: antialiased;
+  font-size: 14px;
+  font-weight: 400;
+  box-sizing: border-box;
+  display: block;
+  text-align: center;
+  cursor: pointer;
+  padding-top: 0px;
+  padding-right: 20px;
+  padding-bottom: 0px;
+  padding-left: 15px;
+  height: 36px;
+  color: "[theme:themePrimary, default:#0078d4]";
+  background-color: "[theme:neutralLighter, default:#f3f2f1]";
+  width: 100%;
+  line-height: 36px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  outline: transparent;
+  border-width: initial;
+  border-style: none;
+  text-decoration: none;
+  border-radius: 0px;
+  overflow: hidden;
+}
+
+.tabsContainer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  height: auto;
+}
+
+.tabContainer {
+  height: 100%;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+[dir=ltr] .tabsContainer {
+  left: 212px;
+}
+
+[dir=ltr] .tabsContainer {
+  right: 0;
+}
+
+.nav {
+  position: absolute;
+  height: 100%;
+  color: "[theme:neutralLighter, default:#f3f2f1]";
+}
+
+[dir=ltr] .nav {
+  border-right: 2px solid;
+  width: 210px;
+}
+
+.nav :global(.ms-Nav) {
+  height: 100%;
+  width: 210px;
+  padding-top: 60px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border-top-width: 40px;
+  border-top-style: solid;
+  color: "[theme:neutralLighter, default:#f3f2f1]";
+}
+
+.tabHeaderContainer {
+  display: inline-block;
+  width: 100%;
+  color: "[theme:neutralLighter, default:#f3f2f1]";
+  border-top: 40px solid;
+}
+
+.breadcrumbNav {
+  margin-top: 0px;
+  padding: 22px 32px;
+}
+
+.breadcrumbNavItem {
+  color: "[theme:neutralPrimary, default:#323130]";
+  font-size: 24px;
+  font-weight: 600;
+  padding: 22px 8px 20px 0;
+}
+
+.breadcrumbNav :global(.ms-Breadcrumb-listItem:last-child .ms-Breadcrumb-itemLink) {
+  font-weight: 600;
+}
+
+.tab {
+  overflow-y: auto;
+  flex-grow: 2;
+}
+
+.tabOffset {
+  padding: 0 32px;
+}
+
+.tabFiles {
+  overflow-y: hidden;
+  overflow-x: hidden;
+  flex-grow: 2;
+  padding: 0 32px;
+}
+
+.scrollablePaneWrapper {
+  height: 75vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.actionButtonsContainer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100%;
+  background-color: "[theme:white, default:#ffffff]";
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  z-index: 100;
+}
+
+.actionButtons {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
+  justify-content: flex-end;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.actionButton {
+  height: 30px;
+  padding-bottom: 3px;
+}
+
+[dir=ltr] .actionButton {
+  padding-left: 16px;
+}
+
+[dir=ltr] .actionButton {
+  margin-left: 0;
+}
+
+[dir=ltr] .actionButton {
+  margin-right: 10px;
+}
+
+[dir=ltr] .actionButtons {
+  padding-left: 20px;
+}
+
+[dir=ltr] .actionButtons {
+  padding-right: 11px;
+}
+
+.tabHeader {
+  color: "[theme:neutralPrimary, default:#323130]";
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  padding: 22px 0 20px 32px;
+}
+
+.tabContainer {
+  height: 100%;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  flex-direction: column;
+}
+
+.filePicker :global(.ms-Panel-main) {
+  top: 50px;
+  border: none;
+  overflow-y: hidden;
+}
+
+.tabsContainer .selectedTab {
+  display: block;
+  height: 100%;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.header {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.xlg, .xxlg, .xxxlg, .xxxxlg {
+  color: inherit;
+}
+
+.itemPickerTopBar {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 40px;
+  background-color: red;
+}
+
+.itemPickerTopBar :global(.ms-CommandBarItem-link) {
+  border-color: transparent;
+}
+
+.commandBarNoChevron :global(.ms-CommandBarItem-chevronDown) {
+  display: none;
+}
+
+.fileItem {
+  cursor: default;
+}
+
+.folderItem {
+  cursor: pointer;
+}
+
+.folderItem:hover {
+  text-decoration: underline;
+}
+
+.fileTypeIcon {
+  margin: 0 -2px;
+  display: inline-block;
+}
+
+.fileTypeIconIcon {
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  overflow: hidden;
+  width: 20px;
+  height: 20px;
+}
+
+.detailsListHeaderFileTypeIcon {
+  font-size: 16px;
+  padding: 0;
+}
+
+.iconColumnHeader {
+  width: 40px !important;
+  margin-right: -8px;
+}
+
+.iconColumnHeader i {
+  font-size: 16px;
+}
+
+.fileRow {
+  color: inherit;
+}
+
+.folderRow {
+  color: inherit;
+}
+
+.folderRow :global(.ms-DetailsRow-check) {
+  visibility: hidden;
+}
+
+.emptyFolder {
+  text-align: center;
+}
+.emptyFolder .emptyFolderImage {
+  padding-top: 52px;
+  height: 208px;
+  width: auto;
+  margin: 0 auto;
+}
+.emptyFolder .emptyFolderImage .emptyFolderImageTag {
+  height: 208px;
+  width: auto;
+}
+.emptyFolder .emptyFolderTitle {
+  padding: 16px 16px 0 16px;
+  font-size: 21px;
+  font-weight: 100;
+  max-width: 400px;
+  color: #858585;
+  margin: 0 auto;
+}
+.emptyFolder .emptyFolderSubText {
+  padding: 6px 16px 0 16px;
+  font-size: 14px;
+  font-weight: 400;
+  max-width: 400px;
+  color: #858585;
+  margin: 0 auto;
+}
+.emptyFolder .emptyFolderMobile {
+  display: none;
+}
+.emptyFolder .emptyFolderPc {
+  color: inherit;
+}
+.emptyFolder .emptyFolderIcon {
+  display: inline;
+  font-size: 13px;
+  padding-left: 2px;
+  padding-right: 1px;
+}
+
+.searchBoxContainer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  margin-bottom: 37px;
+}
+.searchBoxContainer .searchBoxMedium {
+  width: 400px;
+}
+.searchBoxContainer .searchBox {
+  margin-bottom: 0;
+}
+.searchBoxContainer .dropdownContainer {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.searchBoxContainer .dropdownContainer :global(.ms-Dropdown-title) {
+  border: 0;
+}
+.searchBoxContainer .dropdownContainer .filterDropdown {
+  width: auto;
+}
+
+[dir=ltr] .searchBoxContainer {
+  margin-left: 33px;
+}
+[dir=ltr] .searchBoxContainer .searchBox {
+  margin-right: 35px;
+  color: inherit;
+}
+
+.filePickerFolderCardGrid {
+  overflow: hidden;
+  font-size: 0;
+}
+.filePickerFolderCardGrid :global .ms-List-page {
+  overflow: hidden;
+  font-size: 0;
+}
+.filePickerFolderCardGrid :global .ms-List-surface {
+  position: relative;
+}
+
+.filePickerFolderCardTile {
+  text-align: center;
+  outline: none;
+  position: relative;
+}
+[dir=ltr] .filePickerFolderCardTile {
+  float: left;
+}
+[dir=rtl] .filePickerFolderCardTile {
+  float: right;
+}
+
+.filePickerFolderCardPadder {
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  right: 5px;
+  bottom: 5px;
+}
+
+:global(.ms-Fabric--isFocusVisible) .filePickerFolderCardTile:focus:after {
+  content: "";
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  top: 2px;
+  bottom: 2px;
+  box-sizing: border-box;
+  border: 1px solid "[theme:white, default:#ffffff]";
+}
+
+.filePickerFolderCardSizer {
+  padding-bottom: 100%;
+}
+
+.filePickerFolderCardImage {
+  width: 100%;
+  left: 0;
+  top: 0;
+  color: "[theme:white, default:#ffffff]";
+  position: absolute;
+  bottom: 0;
+  font-size: 12px;
+  width: 100%;
+}
+
+.filePickerFolderCardLabel {
+  background-color: rgba(0, 0, 0, 0.6);
+  height: 100%;
+  width: 100%;
+  top: 0;
+  color: "[theme:white, default:#ffffff]";
+  padding: 10px;
+  position: absolute;
+  bottom: 0;
+  font-size: 12px;
+  left: 0;
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 21px;
+  font-weight: 600;
+}
+.filePickerFolderCardLabel:hover {
+  color: "[theme:neutralLight, default:#edebe9]";
+  background-color: rgba(0, 0, 0, 0.6);
+}
+.filePickerFolderCardLabel:active {
+  background-color: "[theme:neutralTertiaryAlt, default:#c8c6c4]";
+  color: "[theme:neutralDark, default:#201f1e]";
+}
+
+[dir=ltr] .bingGridListCell {
+  margin-right: 8px;
+}
+
+.bingGridListCell {
+  margin-bottom: 8px;
+}
+
+.bingTile {
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  overflow: hidden;
+  position: relative;
+  -webkit-transition: -webkit-transform 0.1s linear;
+  transition: -webkit-transform 0.1s linear;
+  transition: transform 0.1s linear;
+  transition: transform 0.1s linear, -webkit-transform 0.1s linear;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+.bingTile:focus {
+  outline: 0;
+}
+.bingTile:active {
+  -webkit-transform: scale(0.96);
+  transform: scale(0.96);
+}
+.bingTile:focus:after {
+  content: "";
+  position: absolute;
+  right: 2px;
+  left: 2px;
+  top: 2px;
+  bottom: 2px;
+  border: 1px solid;
+  border-color: "[theme:white, default:#ffffff]";
+  -webkit-box-shadow: 0 0 0 2px "[theme:neutralSecondaryAlt, default:#797775]";
+  box-shadow: 0 0 0 2px "[theme:neutralSecondaryAlt, default:#797775]";
+}
+
+.bingTileContent {
+  border: 1px solid;
+  border-color: "[theme:white, default:#ffffff]";
+  width: 100%;
+  height: 100%;
+}
+
+.bingTileFrame {
+  position: absolute;
+  display: none;
+  left: 2px;
+  top: 2px;
+  right: 2px;
+  bottom: 2px;
+  -webkit-box-shadow: 0 0 0 2px "[theme:neutralTertiaryAlt, default:#c8c6c4]";
+  box-shadow: 0 0 0 2px "[theme:neutralTertiaryAlt, default:#c8c6c4]";
+  outline: 1px solid transparent;
+}
+
+[dir=ltr] .bingTileCheckCircle {
+  right: 8px;
+}
+
+.bingTileCheckCircle {
+  display: block;
+  position: absolute;
+  top: 6px;
+  opacity: 0;
+  background: 0 0;
+  border: none;
+  outline: 0;
+  top: 8px;
+}
+
+.bingTileNamePlate {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 4px 8px 8px;
+  background-color: "[theme:white, default:#ffffff]";
+  color: "[theme:neutralPrimary, default:#323130]";
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  opacity: 0.95;
+  text-decoration: underline;
+  font-size: 12px;
+}
+
+.bingTile.isSelected .bingTileCheckCircle,
+.bingTile:hover,
+.bingTile:hover .bingTileCheckCircle {
+  opacity: 1;
+}
+
+[dir=ltr] .copyrightLabel {
+  padding-left: 32px;
+}
+
+.copyrightLabel {
+  font-size: 12px;
+}
+
+.noResultLabel {
+  padding: 12px;
+}
+
+.bingTileThumbnail {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+}
+.bingTileThumbnail img {
+  display: block;
+  opacity: 1;
+  width: 100%;
+  height: auto;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  animation-duration: 0.367s;
+  animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);
+  animation-fill-mode: both;
+}
+
+.bingGrildList :global(.ms-List-cell),
+.bingGrildList :global(.ms-List-page) {
+  display: inline-block;
+  overflow: hidden;
+}
+/*# sourceMappingURL=WebSearchTab.module.scss.css.map */

package/lib/controls/filePicker/WebSearchTab/WebSearchTab.module.scss.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../../../common/temp/node_modules/.pnpm/@fluentui+react@8.106.4_@types+react-dom@17.0.17_@types+react@17.0.45_react-dom@17.0.1_react@17.0.1/node_modules/@fluentui/react/dist/sass/mixins/_Font.Mixins.scss","../../../../src/controls/filePicker/FilePicker.module.scss","../../../../src/controls/filePicker/WebSearchTab/WebSearchTab.module.scss","../../../../../../common/temp/node_modules/.pnpm/@fluentui+react@8.106.4_@types+react-dom@17.0.17_@types+react@17.0.45_react-dom@17.0.1_react@17.0.1/node_modules/@fluentui/react/dist/sass/mixins/_Directionality.Mixins.scss"],"names":[],"mappings":"AAKA;AAAA;AAAA;AAAA;AAAA;AAAA;ACHA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACA;;;AAGA;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;;;ACtYJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;;AAKN;EACE;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAGE;EACE;EACA;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;ACxDA;EA2KI;;AApKJ;EAwKI;;;ADnHN;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAEF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;AAAA;EAEE;EACA","sourcesContent":["// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.\r\n\r\n//== Font definitions.\r\n//\r\n\r\n/*\r\n  Your use of the content in the files referenced here is subject to the terms of the license at http://aka.ms/fabric-assets-license\r\n*/\r\n\r\n// Produce @font-face definitions for the web fonts.\r\n@mixin ms-font-face($font-family-name, $cdn-folder, $cdn-font-name: \"segoeui\") {\r\n  @font-face {\r\n    font-family: $font-family-name;\r\n    src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff2\")\r\n        format(\"woff2\"),\r\n      url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-light.woff\")\r\n        format(\"woff\");\r\n    font-weight: $ms-font-weight-light;\r\n    font-style: normal;\r\n  }\r\n\r\n  @font-face {\r\n    font-family: $font-family-name;\r\n    src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff2\")\r\n        format(\"woff2\"),\r\n      url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semilight.woff\")\r\n        format(\"woff\");\r\n    font-weight: $ms-font-weight-semilight;\r\n    font-style: normal;\r\n  }\r\n\r\n  @font-face {\r\n    font-family: $font-family-name;\r\n    src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff2\")\r\n        format(\"woff2\"),\r\n      url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-regular.woff\")\r\n        format(\"woff\");\r\n    font-weight: $ms-font-weight-regular;\r\n    font-style: normal;\r\n  }\r\n\r\n  @font-face {\r\n    font-family: $font-family-name;\r\n    src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff2\")\r\n        format(\"woff2\"),\r\n      url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-semibold.woff\")\r\n        format(\"woff\");\r\n    font-weight: $ms-font-weight-semibold;\r\n    font-style: normal;\r\n  }\r\n\r\n  @font-face {\r\n    font-family: $font-family-name;\r\n    src: url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff2\")\r\n        format(\"woff2\"),\r\n      url(\"#{$ms-font-cdn-path}/#{$cdn-folder}/#{$cdn-font-name}-bold.woff\")\r\n        format(\"woff\");\r\n    font-weight: $ms-font-weight-bold;\r\n    font-style: normal;\r\n  }\r\n}\r\n\r\n// Generate overrides to set font-family based on the lang attribute.\r\n@mixin ms-font-family-language-override($language-code, $font-family) {\r\n  *[lang^=\"#{$language-code}\"] .ms-Fabric,\r\n  .ms-Fabric *[lang^=\"#{$language-code}\"],\r\n  .ms-Fabric[lang^=\"#{$language-code}\"] {\r\n    font-family: $font-family;\r\n  }\r\n}\r\n\r\n//== Font weight.\r\n//\r\n\r\n@mixin ms-fontWeight-regular {\r\n  font-weight: $ms-font-weight-regular;\r\n}\r\n@mixin ms-fontWeight-semibold {\r\n  font-weight: $ms-font-weight-semibold;\r\n}\r\n@mixin ms-fontWeight-bold {\r\n  font-weight: $ms-font-weight-bold;\r\n}\r\n\r\n//== Font size.\r\n//\r\n\r\n@mixin ms-fontSize-68 {\r\n  font-size: $ms-font-size-68;\r\n}\r\n@mixin ms-fontSize-42 {\r\n  font-size: $ms-font-size-42;\r\n}\r\n@mixin ms-fontSize-32 {\r\n  font-size: $ms-font-size-32;\r\n}\r\n@mixin ms-fontSize-28 {\r\n  font-size: $ms-font-size-28;\r\n}\r\n@mixin ms-fontSize-24 {\r\n  font-size: $ms-font-size-24;\r\n}\r\n@mixin ms-fontSize-20 {\r\n  font-size: $ms-font-size-20;\r\n}\r\n@mixin ms-fontSize-18 {\r\n  font-size: $ms-font-size-18;\r\n}\r\n@mixin ms-fontSize-16 {\r\n  font-size: $ms-font-size-16;\r\n}\r\n@mixin ms-fontSize-14 {\r\n  font-size: $ms-font-size-14;\r\n}\r\n@mixin ms-fontSize-12 {\r\n  font-size: $ms-font-size-12;\r\n}\r\n@mixin ms-fontSize-10 {\r\n  font-size: $ms-font-size-10;\r\n}\r\n\r\n// Deprecated MDL2 font mixins.\r\n@import \"./Font.Mixins.MDL2\";\r\n","@import 'pkg:@fluentui/react/dist/sass/References.scss';\n\n.filePicker {\n  color: inherit;\n}\n\n.filePicker :global(.ms-Panel-commands) {\n  display: none;\n}\n\n.filePicker :global(.ms-Panel-main) {\n  top: 50px;\n  border: none;\n  overflow-y: hidden;\n}\n\n[dir=\"ltr\"] .filePicker :global(.ms-Panel-content) {\n  padding-left: 0;\n}\n\n.filePicker :global(.ms-Panel-contentInner) {\n  padding: 0;\n  top: 0;\n  overflow: hidden;\n}\n\n.filePicker :global(.ms-Panel-header) {\n  margin: 0;\n}\n\n.filePicker :global(.ms-Nav-link) {\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  font-size: 14px;\n  font-weight: 400;\n  box-sizing: border-box;\n  display: block;\n  text-align: center;\n  cursor: pointer;\n  padding-top: 0px;\n  padding-right: 20px;\n  padding-bottom: 0px;\n  padding-left: 15px;\n  height: 36px;\n  color: \"[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]\";\n  background-color: transparent;\n  width: 100%;\n  line-height: 36px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n  outline: transparent;\n  border-width: initial;\n  border-style: none;\n  border-image: initial;\n  text-decoration: none;\n  border-radius: 0px;\n  overflow: hidden;\n  border-color: transparent;\n}\n\n.filePicker :global(.is-selected) :global(.ms-Nav-link) {\n  position: relative;\n  -webkit-font-smoothing: antialiased;\n  font-size: 14px;\n  font-weight: 400;\n  box-sizing: border-box;\n  display: block;\n  text-align: center;\n  cursor: pointer;\n  padding-top: 0px;\n  padding-right: 20px;\n  padding-bottom: 0px;\n  padding-left: 15px;\n  height: 36px;\n  color: \"[theme:themePrimary, default:#{$ms-color-themePrimary}]\";\n  background-color: \"[theme:neutralLighter, default:#{$ms-color-neutralLighter}]\";\n  width: 100%;\n  line-height: 36px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  user-select: none;\n  outline: transparent;\n  border-width: initial;\n  border-style: none;\n  text-decoration: none;\n  border-radius: 0px;\n  overflow: hidden;\n}\n.tabsContainer {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  height: auto;\n}\n\n.tabContainer {\n  height: 100%;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -ms-flex-direction: column;\n  flex-direction: column;\n}\n\n[dir=\"ltr\"] .tabsContainer {\n  left: 212px;\n}\n\n[dir=\"ltr\"] .tabsContainer {\n  right: 0;\n}\n\n.nav {\n  position: absolute;\n  height: 100%;\n  color: \"[theme:neutralLighter, default:#{$ms-color-neutralLighter}]\";\n}\n\n[dir=\"ltr\"] .nav {\n  border-right: 2px solid;\n  width: 210px;\n}\n\n.nav :global(.ms-Nav) {\n  height: 100%;\n  width: 210px;\n  padding-top: 60px;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  border-top-width: 40px;\n  border-top-style: solid;\n  color: \"[theme:neutralLighter, default:#{$ms-color-neutralLighter}]\";\n}\n\n.tabHeaderContainer {\n  display: inline-block;\n  width: 100%;\n  color: \"[theme:neutralLighter, default:#{$ms-color-neutralLighter}]\";\n  border-top: 40px solid;\n}\n\n.breadcrumbNav {\n  margin-top: 0px;\n  padding: 22px 32px;\n}\n.breadcrumbNavItem {\n  color: \"[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]\";\n  font-size: 24px;\n  font-weight: 600;\n  padding: 22px 8px 20px 0;\n}\n\n.breadcrumbNav :global(.ms-Breadcrumb-listItem:last-child .ms-Breadcrumb-itemLink) {\n  font-weight: 600;\n}\n\n.tab {\n  overflow-y: auto;\n  flex-grow: 2;\n}\n\n.tabOffset {\n  padding: 0 32px;\n}\n\n.tabFiles {\n  overflow-y: hidden;\n  overflow-x: hidden;\n  flex-grow: 2;\n  padding: 0 32px;\n}\n.scrollablePaneWrapper {\n  height: 75vh;\n  position: relative;\n  overflow: hidden;\n}\n\n.actionButtonsContainer {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: vertical;\n  -webkit-box-direction: normal;\n  -ms-flex-direction: column;\n  flex-direction: column;\n  width: 100%;\n  background-color: \"[theme:white, default:#{$ms-color-white}]\";\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  z-index: 100;\n}\n\n.actionButtons {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-pack: end;\n  -ms-flex-pack: end;\n  justify-content: flex-end;\n  padding-top: 10px;\n  padding-bottom: 10px;\n}\n\n.actionButton {\n  height: 30px;\n  padding-bottom: 3px;\n}\n\n[dir=\"ltr\"] .actionButton {\n  padding-left: 16px;\n}\n\n[dir=\"ltr\"] .actionButton {\n  margin-left: 0;\n}\n\n[dir=\"ltr\"] .actionButton {\n  margin-right: 10px;\n}\n\n[dir=\"ltr\"] .actionButtons {\n  padding-left: 20px;\n}\n\n[dir=\"ltr\"] .actionButtons {\n  padding-right: 11px;\n}\n\n.tabHeader {\n  color: \"[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]\";\n  margin: 0;\n  font-size: 24px;\n  font-weight: 600;\n  padding: 22px 0 20px 32px;\n}\n\n.tabContainer {\n  height: 100%;\n  box-sizing: border-box;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  flex-direction: column;\n}\n\n.filePicker :global(.ms-Panel-main) {\n  top: 50px;\n  border: none;\n  overflow-y: hidden;\n}\n\n.tabsContainer .selectedTab {\n  display: block;\n  height: 100%;\n  width: 100%;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n\n.header {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.xlg, .xxlg, .xxxlg, .xxxxlg {\n  color: inherit;\n}\n\n.itemPickerTopBar {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 40px;\n  background-color: red;\n}\n\n.itemPickerTopBar :global(.ms-CommandBarItem-link) {\n  border-color: transparent;\n}\n\n.commandBarNoChevron :global(.ms-CommandBarItem-chevronDown) {\n  display: none;\n}\n\n\n.fileItem {\n  cursor: default;\n}\n\n.folderItem {\n  cursor: pointer;\n}\n\n.folderItem:hover {\n  text-decoration: underline;\n}\n\n.fileTypeIcon {\n  margin: 0 -2px;\n  display: inline-block;\n}\n\n.fileTypeIconIcon {\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  overflow: hidden;\n  width: 20px;\n  height: 20px;\n}\n\n.detailsListHeaderFileTypeIcon {\n  font-size: 16px;\n  padding: 0;\n}\n\n.iconColumnHeader {\n  width: 40px!important;\n  margin-right: -8px;\n}\n\n.iconColumnHeader i {\n  font-size:16px;\n}\n\n.fileRow {\ncolor: inherit;\n}\n\n.folderRow {\n  color: inherit;\n}\n\n.folderRow :global(.ms-DetailsRow-check) {\n  visibility: hidden;\n}\n\n.emptyFolder {\n  text-align: center;\n\n  .emptyFolderImage {\n    padding-top: 52px;\n    height: 208px;\n    width: auto;\n    margin: 0 auto;\n\n    .emptyFolderImageTag {\n      height: 208px;\n      width: auto;\n    }\n  }\n\n  .emptyFolderTitle {\n    padding: 16px 16px 0 16px;\n    font-size: 21px;\n    font-weight: 100;\n    max-width: 400px;\n    color: #858585;\n    margin: 0 auto;\n  }\n\n  .emptyFolderSubText {\n    padding: 6px 16px 0 16px;\n    font-size: 14px;\n    font-weight: 400;\n    max-width: 400px;\n    color: #858585;\n    margin: 0 auto;\n  }\n\n  .emptyFolderMobile {\n    display: none;\n  }\n\n  .emptyFolderPc {\n    color: inherit;\n  }\n\n  .emptyFolderIcon {\n    display: inline;\n    font-size: 13px;\n    padding-left: 2px;\n    padding-right: 1px;\n  }\n}\n","@import 'pkg:@fluentui/react/dist/sass/References.scss';\n\n@import \"../FilePicker.module.scss\";\n\n.searchBoxContainer {\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-orient: horizontal;\n  -webkit-box-direction: normal;\n  -ms-flex-flow: row wrap;\n  flex-flow: row wrap;\n  margin-bottom: 37px;\n\n  .searchBoxMedium {\n    width: 400px;\n  }\n\n  .searchBox {\n    margin-bottom: 0;\n  }\n\n  .dropdownContainer {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n\n    :global(.ms-Dropdown-title) {\n      border: 0;\n    }\n\n    .filterDropdown {\n      width: auto;\n    }\n  }\n}\n\n[dir=\"ltr\"] .searchBoxContainer {\n  margin-left: 33px;\n\n  .searchBox {\n    margin-right: 35px;\n    color: inherit;\n  }\n}\n\n.filePickerFolderCardGrid {\n  overflow: hidden;\n  font-size: 0;\n\n  :global {\n    .ms-List-page {\n      overflow: hidden;\n      font-size: 0;\n    }\n\n    .ms-List-surface {\n      position: relative;\n    }\n  }\n}\n\n.filePickerFolderCardTile {\n  text-align: center;\n  outline: none;\n  position: relative;\n  @include ms-float(left);\n}\n\n.filePickerFolderCardPadder {\n  position: absolute;\n  left: 5px;\n  top: 5px;\n  right: 5px;\n  bottom: 5px;\n}\n\n:global(.ms-Fabric--isFocusVisible) .filePickerFolderCardTile:focus:after {\n  content: \"\";\n  position: absolute;\n  left: 2px;\n  right: 2px;\n  top: 2px;\n  bottom: 2px;\n  box-sizing: border-box;\n  border: 1px solid \"[theme:white, default:#{$ms-color-white}]\";\n}\n\n.filePickerFolderCardSizer {\n  padding-bottom: 100%;\n}\n\n.filePickerFolderCardImage {\n  width: 100%;\n  left: 0;\n  top: 0;\n  color: \"[theme:white, default:#{$ms-color-white}]\";\n  position: absolute;\n  bottom: 0;\n  font-size: 12px;\n  width: 100%;\n}\n\n.filePickerFolderCardLabel {\n  background-color: rgba(0, 0, 0, 0.6);\n  height: 100%;\n  width: 100%;\n  top: 0;\n  color: \"[theme:white, default:#{$ms-color-white}]\";\n  padding: 10px;\n  position: absolute;\n  bottom: 0;\n  font-size: 12px;\n  left: 0;\n  width: 100%;\n  box-sizing: border-box;\n  font-size: 21px;\n  font-weight: 600;\n\n  &:hover {\n    color: \"[theme:neutralLight, default:#{$ms-color-neutralLight}]\";\n    background-color: rgba(0, 0, 0, 0.6);\n  }\n\n  &:active {\n    background-color: \"[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]\";\n    color: \"[theme:neutralDark, default:#{$ms-color-neutralDark}]\";\n  }\n}\n\n[dir=\"ltr\"] .bingGridListCell {\n  margin-right: 8px;\n}\n\n.bingGridListCell {\n  margin-bottom: 8px;\n}\n\n.bingTile {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  cursor: pointer;\n  display: inline-block;\n  overflow: hidden;\n  position: relative;\n  -webkit-transition: -webkit-transform 0.1s linear;\n  transition: -webkit-transform 0.1s linear;\n  transition: transform 0.1s linear;\n  transition: transform 0.1s linear, -webkit-transform 0.1s linear;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n\n  &:focus {\n    outline: 0;\n  }\n\n  &:active {\n    -webkit-transform: scale(0.96);\n    transform: scale(0.96);\n  }\n\n  &:focus:after {\n    content: \"\";\n    position: absolute;\n    right: 2px;\n    left: 2px;\n    top: 2px;\n    bottom: 2px;\n    border: 1px solid;\n    border-color: \"[theme:white, default:#{$ms-color-white}]\";\n    -webkit-box-shadow: 0 0 0 2px \"[theme:neutralSecondaryAlt, default:#{$ms-color-neutralSecondaryAlt}]\";\n    box-shadow: 0 0 0 2px \"[theme:neutralSecondaryAlt, default:#{$ms-color-neutralSecondaryAlt}]\";\n  }\n}\n\n.bingTileContent {\n  border: 1px solid;\n  border-color: \"[theme:white, default:#{$ms-color-white}]\";\n  width: 100%;\n  height: 100%;\n}\n\n.bingTileFrame {\n  position: absolute;\n  display: none;\n  left: 2px;\n  top: 2px;\n  right: 2px;\n  bottom: 2px;\n  -webkit-box-shadow: 0 0 0 2px \"[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]\";\n  box-shadow: 0 0 0 2px \"[theme:neutralTertiaryAlt, default:#{$ms-color-neutralTertiaryAlt}]\";\n  outline: 1px solid transparent;\n}\n\n[dir=\"ltr\"] .bingTileCheckCircle {\n  right: 8px;\n}\n\n.bingTileCheckCircle {\n  display: block;\n  position: absolute;\n  top: 6px;\n  opacity: 0;\n  background: 0 0;\n  border: none;\n  outline: 0;\n  top: 8px;\n}\n\n.bingTileNamePlate {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 4px 8px 8px;\n  background-color: \"[theme:white, default:#{$ms-color-white}]\";\n  color: \"[theme:neutralPrimary, default:#{$ms-color-neutralPrimary}]\";\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  opacity: 0.95;\n  text-decoration: underline;\n  font-size: 12px;\n}\n\n.bingTile.isSelected .bingTileCheckCircle,\n.bingTile:hover,\n.bingTile:hover .bingTileCheckCircle {\n  opacity: 1;\n}\n\n[dir=\"ltr\"] .copyrightLabel {\n  padding-left: 32px;\n}\n.copyrightLabel {\n  font-size: 12px;\n}\n\n.noResultLabel {\n  padding: 12px;\n}\n\n.bingTileThumbnail {\n  position: absolute;\n  height: 100%;\n  width: 100%;\n  top: 0;\n\n  img {\n    display: block;\n    opacity: 1;\n    width: 100%;\n    height: auto;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    animation-duration: 0.367s;\n    animation-timing-function: cubic-bezier(0.1, 0.25, 0.75, 0.9);\n    animation-fill-mode: both;\n  }\n}\n\n.bingGrildList :global(.ms-List-cell),\n.bingGrildList :global(.ms-List-page) {\n  display: inline-block;\n  overflow: hidden;\n}\n","// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.\r\n\r\n//\r\n// Office UI Fabric\r\n// --------------------------------------------------\r\n// Directionality mixins to generate LTR and RTL-specific styles\r\n\r\n// Base left-to-right mixin definition.\r\n@mixin ms-LTR {\r\n  [dir='ltr'] & {\r\n    @content;\r\n  }\r\n}\r\n\r\n// Base right-to-left mixin definition.\r\n@mixin ms-RTL {\r\n  [dir='rtl'] & {\r\n    @content;\r\n  }\r\n}\r\n\r\n// Use baseRTL to set the default direction to right-to-left on\r\n// a root element (e.g. page or region) that needs RTL support.\r\n@mixin ms-base-RTL {\r\n  @include ms-RTL {\r\n    direction: rtl;\r\n    unicode-bidi: bidi-override;\r\n  }\r\n}\r\n\r\n\r\n// Common CSS property mixins with support for RTL.\r\n// Use to automatically create RTL versions of your properties.\r\n\r\n// Background direction.\r\n@mixin ms-background-position($alignment) {\r\n  @if $alignment == left {\r\n    @include ms-LTR {\r\n      background-position: left;\r\n    }\r\n\r\n    @include ms-RTL {\r\n      background-position: right;\r\n    }\r\n  } @else if $alignment == right {\r\n    @include ms-LTR {\r\n      background-position: right;\r\n    }\r\n\r\n    @include ms-RTL {\r\n      background-position: left;\r\n    }\r\n  } @else {\r\n    background-position: $alignment;\r\n  }\r\n}\r\n\r\n// Border styles.\r\n@mixin ms-border-color($top, $right, $bottom, $left) {\r\n  border-color: $top $right $bottom $left;\r\n\r\n  @include ms-RTL {\r\n    border-color: $top $left $bottom $right;\r\n  }\r\n}\r\n\r\n@mixin ms-border-left($width, $style, $color) {\r\n  @include ms-LTR {\r\n    border-left: $width $style $color;\r\n  }\r\n\r\n  @include ms-RTL {\r\n    border-right: $width $style $color;\r\n  }\r\n}\r\n\r\n@mixin ms-border-left-color($color) {\r\n  @include ms-LTR {\r\n    border-left-color: $color;\r\n  }\r\n\r\n  @include ms-RTL {\r\n    border-right-color: $color;\r\n  }\r\n}\r\n\r\n@mixin ms-border-left-style($style) {\r\n  @include ms-LTR {\r\n    border-left-style: $style;\r\n  }\r\n\r\n  @include ms-RTL {\r\n    border-right-style: $style;\r\n  }\r\n}\r\n\r\n@mixin ms-border-left-width($width) {\r\n  @include ms-LTR {\r\n    border-left-width: $width;\r\n  }\r\n\r\n  @include ms-RTL {\r\n    border-right-width: $width;\r\n  }\r\n}\r\n\r\n@mixin ms-border-radius($topLeft, $topRight, $bottomRight, $bottomLeft) {\r\n  border-radius: $topLeft $topRight $bottomRight $bottomLeft;\r\n\r\n  @include ms-RTL {\r\n    border-radius: $topRight $topLeft $bottomLeft $bottomRight;\r\n  }\r\n}\r\n\r\n@mixin ms-border-right($width, $style, $color) {\r\n  @include ms-LTR {\r\n    border-right: $width $style $color;\r\n  }\r\n\r\n  @include ms-RTL {\r\n    border-left: $width $style $color;\r\n  }\r\n}\r\n\r\n@mixin ms-border-right-color($color) {\r\n  @include ms-LTR {\r\n      border-right-color: $color;\r\n  }\r\n\r\n  @include ms-RTL {\r\n      border-left-color: $color;\r\n  }\r\n}\r\n\r\n@mixin ms-border-right-style($style) {\r\n  @include ms-LTR {\r\n    border-right-style: $style;\r\n  }\r\n  \r\n  @include ms-RTL {\r\n    border-left-style: $style;\r\n  }\r\n}\r\n\r\n@mixin ms-border-right-width($width) {\r\n  @include ms-LTR {\r\n    border-right-width: $width;\r\n  }\r\n\r\n  @include ms-RTL {\r\n    border-left-width: $width;\r\n  }\r\n}\r\n\r\n// Floats.\r\n@mixin ms-clear($side) {\r\n  @if $side == left {\r\n    @include ms-LTR {\r\n      clear: $side;\r\n    }\r\n\r\n    @include ms-RTL {\r\n      clear: right;\r\n    }\r\n  } @else if $side == right {\r\n    @include ms-LTR {\r\n      clear: $side;\r\n    }\r\n\r\n    @include ms-RTL {\r\n      clear: left;\r\n    }\r\n  } @else {\r\n      clear: $side;\r\n  }\r\n}\r\n\r\n@mixin ms-float($direction) {\r\n  @if $direction == left {\r\n    @include ms-LTR {\r\n      float: left;\r\n    }\r\n\r\n    @include ms-RTL {\r\n      float: right;\r\n    }\r\n  } @else {\r\n    @include ms-LTR {\r\n      float: right;\r\n    }\r\n\r\n    @include ms-RTL {\r\n      float: left;\r\n    }\r\n  }\r\n}\r\n\r\n// Positioning.\r\n@mixin ms-left($distance) {\r\n  @include ms-LTR {\r\n    left: $distance;\r\n  }\r\n\r\n  @include ms-RTL {\r\n    right: $distance;\r\n  }\r\n}\r\n\r\n@mixin ms-right($distance) {\r\n  @include ms-LTR {\r\n    right: $distance;\r\n  }\r\n\r\n  @include ms-RTL {\r\n    left: $distance;\r\n  }\r\n}\r\n\r\n// Margins.\r\n@mixin ms-margin($top, $right, $bottom, $left) {\r\n  margin: $top $right $bottom $left;\r\n\r\n  @include ms-RTL {\r\n    margin: $top $left $bottom $right;\r\n  }\r\n}\r\n\r\n@mixin ms-margin-left($distance) {\r\n  @include ms-LTR {\r\n    margin-left: $distance;\r\n  }\r\n\r\n  @include ms-RTL {\r\n    margin-right: $distance;\r\n  }\r\n}\r\n\r\n@mixin ms-margin-right($distance) {\r\n  @include ms-LTR {\r\n    margin-right: $distance;\r\n  }\r\n  @include ms-RTL {\r\n    margin-left: $distance;\r\n  }\r\n}\r\n\r\n// Padding.\r\n@mixin ms-padding($top, $right, $bottom, $left) {\r\n  padding: $top $right $bottom $left;\r\n\r\n  @include ms-RTL {\r\n    padding: $top $left $bottom $right;\r\n  }\r\n}\r\n\r\n@mixin ms-padding-left($distance) {\r\n  @include ms-LTR {\r\n    padding-left: $distance;\r\n  }\r\n\r\n  @include ms-RTL {\r\n    padding-right: $distance;\r\n  }\r\n}\r\n\r\n@mixin ms-padding-right($distance) {\r\n  @include ms-LTR {\r\n    padding-right: $distance;\r\n  }\r\n\r\n  @include ms-RTL {\r\n    padding-left: $distance;\r\n  }\r\n}\r\n\r\n// Text-alignment.\r\n@mixin ms-text-align($direction) {\r\n  @if $direction == left {\r\n    @include ms-LTR {\r\n      text-align: left;\r\n    }\r\n\r\n    @include ms-RTL {\r\n      text-align: right;\r\n    }\r\n  } @else {\r\n    @include ms-LTR {\r\n      text-align: right;\r\n    }\r\n\r\n    @include ms-RTL {\r\n      text-align: left;\r\n    }\r\n  }\r\n}\r\n\r\n// Box-shadow.\r\n@mixin ms-box-shadow($left, $etc) {\r\n  @if $left != 0 {\r\n    @include ms-LTR {\r\n      box-shadow: $left $etc;\r\n    }\r\n\r\n    @include ms-RTL {\r\n      box-shadow: -$left $etc;\r\n    }\r\n  } @else {\r\n    box-shadow: 0 $etc;\r\n  }\r\n}\r\n\r\n// Transforms.\r\n@mixin ms-transform-scaleX($scaleX: 1) {\r\n  @include ms-LTR {\r\n    transform: scaleX($scaleX);\r\n  }\r\n\r\n  @include ms-RTL {\r\n    transform: scaleX(-$scaleX);\r\n  }\r\n}\r\n\r\n@mixin ms-transform-translateX($distance) {\r\n  @include ms-LTR {\r\n    transform: translateX($distance);\r\n  }\r\n\r\n  @include ms-RTL {\r\n    transform: translateX(-$distance);\r\n  }\r\n}\r\n\r\n@mixin ms-transform-rotate($degrees) {\r\n  @include ms-LTR {\r\n    transform: rotate($degrees);\r\n  }\r\n\r\n  @include ms-RTL {\r\n    transform: rotate(-$degrees);\r\n  }\r\n}\r\n\r\n// Transitions. Only supported when ONLY left/right are declared\r\n@mixin ms-transition-property($direction) {\r\n  @if $direction == left {\r\n    @include ms-LTR {\r\n      transition-property: left;\r\n    }\r\n\r\n    @include ms-RTL {\r\n      transition-property: right;\r\n    }\r\n  } @else {\r\n    @include ms-LTR {\r\n      transition-property: right;\r\n    }\r\n\r\n    @include ms-RTL {\r\n      transition-property: left;\r\n    }\r\n  }\r\n}\r\n"],"file":"WebSearchTab.module.scss.css"}