@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono");.section-heading,.section-block>.name{font:600 1.61rem/1.5 "Open Sans",Arial,Helvetica,sans-serif;color:#0035AD}.section-heading:after,.section-block>.name:after{content:'';width:24px;border-top:2px #0035AD solid;display:block;margin:24px 0 0}.section-sub-heading{text-transform:uppercase;letter-spacing:0.18em;font:600 0.85rem / 1.5 "Open Sans",Arial,Helvetica,sans-serif;background:rgba(12,10,32,0.05);padding:8px 12px}.variable-name,.table-group>.item>.name,[data-token-index="color"] .data:before,[data-token-index="icon-size"] .data:before,[data-token-index="space"] .data:before,[data-token-index="font-size"] .data:before,.variable-value,.table-group>.item>.value,.table-group>.item>.parameters,[data-token-index="color"] .data>span:before,[data-token-index="icon-size"] .data:after,[data-token-index="space"] .data:after,[data-token-index="font-size"] .data>span:before{font:600 0.85rem / 1.6 "IBM Plex Mono",monospace;color:#0c0a20}.variable-value,.table-group>.item>.value,.table-group>.item>.parameters,[data-token-index="color"] .data>span:before,[data-token-index="icon-size"] .data:after,[data-token-index="space"] .data:after,[data-token-index="font-size"] .data>span:before{font-weight:400;color:#0035AD}.class-name,.--element:before{font:0.85rem / 1.5 "IBM Plex Mono",monospace;color:#5a5a5a}.description,.short-description{color:#5a5a5a;font:1rem/1.6 "Open Sans",Arial,Helvetica,sans-serif;max-width:520px}.description>p,.short-description>p{margin-bottom:1.6em}.description>p:last-of-type,.short-description>p:last-of-type{margin-bottom:0}.short-description{font-size:.85rem;opacity:.6}.table-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.table-group>.item{-webkit-box-flex:1;-ms-flex:1 50%;flex:1 50%;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.05);display:-webkit-box;display:-ms-flexbox;display:flex;margin:auto 0}.table-group>.item>.name{-webkit-box-flex:1;-ms-flex:1 50%;flex:1 50%;padding-right:16px;max-width:300px}.table-group>.item>.value{-webkit-box-flex:1;-ms-flex:1 50%;flex:1 50%}.table-group>.item>.parameters{display:-webkit-box;display:-ms-flexbox;display:flex;margin-right:8px;padding:0 2px}.table-group>.item>.parameters>span{font-size:.67rem;margin-right:4px;background:rgba(0,53,173,0.05);color:#0c0a20;padding:2px 8px;border-radius:4px}.table-group>.item>.parameters>span:first-of-type{margin-left:4px}.table-group>.item>.parameters:before,.table-group>.item>.parameters:after{color:#0c0a20;opacity:.3}.table-group>.item>.parameters:before{content:'('}.table-group>.item>.parameters:after{content:')'}.mixins .table-group>.item>.name{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-preferred-size:auto;flex-basis:auto;padding-right:2px}.section-block{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:80px;-webkit-box-shadow:inset 12px 0 #0035AD;box-shadow:inset 12px 0 #0035AD}.section-block.-section-is-hidden{display:none}.section-block>.name{margin-bottom:32px;-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.section-block>.description,.section-block>.short-description{-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;margin-bottom:32px}.section-block>.section-content{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.index-item>a{text-decoration:none;color:rgba(255,255,255,0.5);font:0.85rem / 1 Arial,Helvetica,sans-serif;display:block;padding:2px 0}.index-list:before{font:0.67rem / 1 Arial,Helvetica,sans-serif;font-weight:bold;text-transform:uppercase;letter-spacing:0.18em;content:attr(data-label);color:#fff;margin-bottom:16px;margin-top:32px;display:block}.index-group{padding:0 32px 32px;overflow-y:auto;background:#0c0a20;z-index:10}.index-group>.index-list{margin-bottom:32px}.code-viewer{display:-webkit-box;display:-ms-flexbox;display:flex;width:32px;height:32px;border-radius:100%;cursor:pointer}.code-viewer:before{content:'';background:url("../images/component-viewer-icons.svg") -32px 0px no-repeat;background-size:160px;width:16px;height:16px;opacity:.6;display:block;margin:auto}.code-viewer:hover{background:rgba(0,0,0,0.4)}.code-viewer:hover:before{background:url("../images/component-viewer-icons.svg") -16px 0px no-repeat;background-size:160px;opacity:1}.--code{padding:16px 32px;background:rgba(0,0,0,0.02);border-left:8px #00985a solid;font:16px / 1.4 monospace;width:100%}.--code:before{content:'html';text-transform:uppercase;font:0.67rem / 1em Arial,san-serif;font-weight:bold;color:#0c0a20;display:inline-block;margin-bottom:16px;padding-bottom:16px;border-bottom:3px solid}.--wrap{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.--components .--wrap{-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal}.--element{padding:18px 0;border-bottom:1px solid rgba(0,0,0,0.05)}.--element:before{content:attr(data-class-name);margin-bottom:12px;display:block}.--element .code-viewer{margin-top:16px}.--element.-code-visible .--code{display:block !important}.--element.-code-visible .code-viewer{background:#00985a;border-radius:4px 4px 0 0}.--element.-code-visible .code-viewer:before{background:url("../images/component-viewer-icons.svg") -16px 0px no-repeat;background-size:160px;opacity:1;position:relative}.--element .--wrap>div{position:relative}.element>.--element:last-of-type{border-bottom:0}.element-group>.element{-webkit-box-ordinal-group:4;-ms-flex-order:3;order:3}.switch{position:relative;width:48px;cursor:pointer}.switch.-active:after{-webkit-transform:translate(140%, -2px);-ms-transform:translate(140%, -2px);transform:translate(140%, -2px)}.switch.-active:before{background:#00985a}.switch:before,.switch:after{display:block;-webkit-transition:all cubic-bezier(0.19, 1, 0.22, 1) 400ms;transition:all cubic-bezier(0.19, 1, 0.22, 1) 400ms}.switch:before{content:'';width:100%;height:16px;border-radius:16px;background:rgba(0,0,0,0.05);border:1px rgba(0,0,0,0.2);-webkit-box-shadow:inset 0px 0px 2px rgba(0,0,0,0.2);box-shadow:inset 0px 0px 2px rgba(0,0,0,0.2)}.switch:after{content:'';top:0;-webkit-transform:translate(0, -2px);-ms-transform:translate(0, -2px);transform:translate(0, -2px);border-radius:100%;position:absolute;width:18px;height:18px;background:#fafafa;border:1px rgba(0,0,0,0.1) solid;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,0.2);box-shadow:2px 2px 5px rgba(0,0,0,0.2)}.toggle-switch{display:-webkit-box;display:-ms-flexbox;display:flex}.toggle-switch>.switch{margin:auto 0}.toggle-switch>label{margin-right:12px;font:600 0.875em/1 Arial,Helvetica,sans-serif;color:#6a6a6a}.toggle-code-view>label:before{content:'';display:block;background:url("../images/component-viewer-icons.svg") 0px 0px no-repeat;background-size:320px;width:32px;height:32px}.section-link{color:#0c0a20;font-weight:600;cursor:pointer;font-size:0.85rem;opacity:.25}.section-link.-active,.section-link:hover{color:#0035AD;opacity:1}.section-link-group{display:-webkit-box;display:-ms-flexbox;display:flex}.section-link-group>.section-link{margin-right:32px}.control-bar{position:fixed;padding:16px 32px;display:-webkit-box;display:-ms-flexbox;display:flex;top:0;left:0;height:64px;background:#fff;border-bottom:1px rgba(0,0,0,0.1) solid;z-index:100}.control-bar>.section-link-group{margin:auto 0}.control-bar>.toggle-switch{margin:auto 0 auto auto}.api-item{padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.04);display:-webkit-box;display:-ms-flexbox;display:flex}.api-item>.name{width:60%}.preview-pane{padding-top:32px;position:relative}.preview-pane>.section-block{border-bottom:16px solid #0c0a20}.preview-pane.-hide-code .--code{display:none}.preview-pane:not(.-hide-code) .code-viewer{background:#00985a;border-radius:4px 4px 0 0}.preview-pane:not(.-hide-code) .code-viewer:before{background:url("../images/component-viewer-icons.svg") -16px 0px no-repeat;background-size:160px;opacity:1;position:relative}.display-panels .control-bar,.display-panels .preview-pane{width:100vw}.display-panels>.index-group{position:fixed;width:384px;height:100vh;right:-64px;top:0;display:none}.display-panels .toggle-code-view{display:none}.display-panels.-show-index>.control-bar,.display-panels.-show-index>.preview-pane{width:-webkit-calc(100% - 320px);width:calc(100% - 320px)}.display-panels.-show-index .toggle-code-view{display:-webkit-box;display:-ms-flexbox;display:flex}.display-panels.-show-index>.index-group{display:block}.view-panel.-small .--wrap{max-width:320px}.view-panel.-medium .--wrap{max-width:640px}.view-panel.-large .--wrap{max-width:1024px}.wrap-in-blue-background .--wrap{background:#0035AD;padding:16px}.wrap-in-dark-background .--wrap{background:#0c0a20;padding:16px}.section-block>.section-content{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}[data-token-index="color"] .data{height:180px;display:-webkit-box;display:-ms-flexbox;display:flex;background:#0c0a20;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-token-index="color"] .data:before{padding:16px 0;content:attr(data-name);background:#fff;display:block}[data-token-index="color"] .data>span{display:block;height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}[data-token-index="color"] .data>span:before{content:attr(data-value);position:absolute;padding:12px 16px;color:white}[data-token-index="color"] .data[data-name="$faint-black-color"]>span:before,[data-token-index="color"] .data[data-name="$subtle-black-color"]>span:before,[data-token-index="color"] .data[data-name="$faint-grey-color"]>span:before,[data-token-index="color"] .data[data-name="$light-grey-color"]>span:before,[data-token-index="color"] .data[data-name="$mid-grey-color"]>span:before,[data-token-index="color"] .data[data-name="$white-color"]>span:before{color:#03112B}[data-token-index="color"] .data[data-name="$faint-black-color"],[data-token-index="color"] .data[data-name="$subtle-black-color"],[data-token-index="color"] .data[data-name="$transparent-black-color"]{background:#fff}[data-token-index="color"] .data[data-name="$black-color"]>span:before{color:#fff}[data-token-index="color"]>.section-content>.data{-webkit-box-flex:1;-ms-flex:1 320px;flex:1 320px}[data-token-index="icon-size"] .data,[data-token-index="space"] .data{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-bottom:1px solid rgba(0,0,0,0.05);padding:0 0 24px}[data-token-index="icon-size"] .data:before,[data-token-index="space"] .data:before{content:attr(data-name);padding:16px 0}[data-token-index="icon-size"] .data:after,[data-token-index="space"] .data:after{content:attr(data-value);display:block;margin-top:auto}[data-token-index="icon-size"] .data>span,[data-token-index="space"] .data>span{display:block;background:rgba(0,0,0,0.15);margin-bottom:16px}[data-token-index="icon-size"]>.section-content>.data,[data-token-index="space"]>.section-content>.data{-webkit-box-flex:1;-ms-flex:1 20%;flex:1 20%}[data-token-index="icon-size"] .data>span{background:url(../images/icon-list.svg) no-repeat;background-size:contain;display:block}[data-token-index="icon-size"] .section-content>.data{-webkit-box-flex:0;-ms-flex:0 25%;flex:0 25%}[data-token-index="font-size"] .data{padding:24px 0;border-bottom:1px solid rgba(0,0,0,0.05);line-height:1}[data-token-index="font-size"] .data:before{padding:16px 0;content:attr(data-name);display:block}[data-token-index="font-size"] .data>span{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:2;white-space:nowrap;padding-right:32px;width:-webkit-calc(100% - 32px);width:calc(100% - 32px);overflow:hidden}[data-token-index="font-size"] .data>span:before{content:attr(data-value);margin:auto 16px auto 0;min-width:80px}[data-token-index="font-size"]>.section-content{-ms-flex-wrap:wrap;flex-wrap:wrap}[data-token-index="font-size"]>.section-content>.data{-webkit-box-flex:1;-ms-flex:1 50%;flex:1 50%}.mixins .section-content,.global-variables .section-content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mixins .section-content>.section-sub-heading,.global-variables .section-content>.section-sub-heading{margin-bottom:16px}.mixins .section-content>.table-group,.global-variables .section-content>.table-group{margin-bottom:32px}.mixins .item>.name{width:auto;max-width:100%}

/*# sourceMappingURL=maps/component-guide.css.map */