carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
13 lines (12 loc) • 31.7 kB
JavaScript
/**
* @license
*
* Copyright IBM Corp. 2019, 2020
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { css } from 'lit-element';
export default css([
"a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}button,input,select,textarea{border-radius:0;font-family:inherit}input[type=text]::-ms-clear{display:none}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}body{line-height:1}sup{vertical-align:super}sub{vertical-align:sub}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::after,blockquote::before,q::after,q::before{content:''}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}button{margin:0}html{font-size:100%}body{font-weight:400;font-family:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:'IBM Plex Mono',Menlo,'DejaVu Sans Mono','Bitstream Vera Sans Mono',Courier,monospace}strong{font-weight:600}@media screen and (-ms-high-contrast:active){svg{fill:ButtonText}}h1{font-size:var(--cds-productive-heading-06-font-size,2.625rem);font-weight:var(--cds-productive-heading-06-font-weight,300);line-height:var(--cds-productive-heading-06-line-height,3.125rem);letter-spacing:var(--cds-productive-heading-06-letter-spacing,0)}h2{font-size:var(--cds-productive-heading-05-font-size,2rem);font-weight:var(--cds-productive-heading-05-font-weight,400);line-height:var(--cds-productive-heading-05-line-height,2.5rem);letter-spacing:var(--cds-productive-heading-05-letter-spacing,0)}h3{font-size:var(--cds-productive-heading-04-font-size,1.75rem);font-weight:var(--cds-productive-heading-04-font-weight,400);line-height:var(--cds-productive-heading-04-line-height,2.25rem);letter-spacing:var(--cds-productive-heading-04-letter-spacing,0)}h4{font-size:var(--cds-productive-heading-03-font-size,1.25rem);font-weight:var(--cds-productive-heading-03-font-weight,400);line-height:var(--cds-productive-heading-03-line-height,1.75rem);letter-spacing:var(--cds-productive-heading-03-letter-spacing,0)}h5{font-size:var(--cds-productive-heading-02-font-size,1rem);font-weight:var(--cds-productive-heading-02-font-weight,600);line-height:var(--cds-productive-heading-02-line-height,1.375rem);letter-spacing:var(--cds-productive-heading-02-letter-spacing,0)}h6{font-size:var(--cds-productive-heading-01-font-size,.875rem);font-weight:var(--cds-productive-heading-01-font-weight,600);line-height:var(--cds-productive-heading-01-line-height,1.125rem);letter-spacing:var(--cds-productive-heading-01-letter-spacing,.16px)}p{font-size:var(--cds-body-long-02-font-size,1rem);font-weight:var(--cds-body-long-02-font-weight,400);line-height:var(--cds-body-long-02-line-height,1.5rem);letter-spacing:var(--cds-body-long-02-letter-spacing,0)}a{color:#0062ff}em{font-style:italic}.bx--assistive-text,.bx--visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;visibility:inherit;white-space:nowrap}.bx--body{box-sizing:border-box;margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.125rem);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);color:var(--cds-text-01,#161616);background-color:var(--cds-ui-background,#fff);line-height:1}.bx--body *,.bx--body ::after,.bx--body ::before{box-sizing:inherit}@-webkit-keyframes skeleton{0%{width:0%;right:0;left:auto;opacity:.3}20%{width:100%;right:0;left:auto;opacity:1}28%{width:100%;right:auto;left:0}51%{width:0%;right:auto;left:0}58%{width:0%;right:auto;left:0}82%{width:100%;right:auto;left:0}83%{width:100%;right:0;left:auto}96%{width:0%;right:0;left:auto}100%{width:0%;right:0;left:auto;opacity:.3}}@keyframes skeleton{0%{width:0%;right:0;left:auto;opacity:.3}20%{width:100%;right:0;left:auto;opacity:1}28%{width:100%;right:auto;left:0}51%{width:0%;right:auto;left:0}58%{width:0%;right:auto;left:0}82%{width:100%;right:auto;left:0}83%{width:100%;right:0;left:auto}96%{width:0%;right:0;left:auto}100%{width:0%;right:0;left:auto;opacity:.3}}.bx--text-truncate--end{width:100%;display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bx--text-truncate--front{width:100%;display:inline-block;direction:ltr;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.bx--tabs,:host(bx-tabs),:host(bx-tabs-skeleton){box-sizing:border-box;margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.125rem);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);color:var(--cds-text-01,#161616);height:auto;width:100%;position:relative}.bx--tabs *,.bx--tabs ::after,.bx--tabs ::before,:host(bx-tabs) *,:host(bx-tabs) ::after,:host(bx-tabs) ::before,:host(bx-tabs-skeleton) *,:host(bx-tabs-skeleton) ::after,:host(bx-tabs-skeleton) ::before{box-sizing:inherit}@media (min-width:42rem){.bx--tabs,:host(bx-tabs),:host(bx-tabs-skeleton){background:0 0;min-height:2.5rem}}@media (min-width:42rem){.bx--tabs--container,:host(bx-tabs[type=container]){min-height:3rem}}.bx--tabs-trigger{display:flex;align-items:center;justify-content:space-between;padding:0 var(--cds-spacing-05,1rem) 0 var(--cds-spacing-09,3rem);height:2.5rem;cursor:pointer;color:var(--cds-text-01,#161616);outline:2px solid transparent;border-bottom:1px solid var(--cds-ui-04,#8d8d8d);background-color:var(--cds-field-01,#f4f4f4)}@media (min-width:42rem){.bx--tabs-trigger{display:none}}.bx--tabs-trigger:active,.bx--tabs-trigger:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}.bx--tabs-trigger svg{position:absolute;left:var(--cds-spacing-05,1rem);fill:var(--cds-ui-05,#161616);transition:-webkit-transform 70ms cubic-bezier(.2,0,.38,.9);transition:transform 70ms cubic-bezier(.2,0,.38,.9);transition:transform 70ms cubic-bezier(.2,0,.38,.9),-webkit-transform 70ms cubic-bezier(.2,0,.38,.9)}.bx--tabs-trigger--open:active,.bx--tabs-trigger--open:focus{outline:2px solid transparent;outline-offset:-2px;transition:outline 70ms cubic-bezier(.2,0,.38,.9)}.bx--tabs-trigger--open{background:var(--cds-ui-03,#e0e0e0)}.bx--tabs-trigger--open svg{-webkit-transform:rotate(180deg);transform:rotate(180deg);transition:-webkit-transform 70ms;transition:transform 70ms;transition:transform 70ms,-webkit-transform 70ms;-webkit-transform-origin:50% 45%;transform-origin:50% 45%}.bx--tabs--light.bx--tabs-trigger{background-color:var(--cds-field-02,#fff)}.bx--tabs-trigger-text{text-decoration:none;padding-top:2px;color:var(--cds-text-01,#161616);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bx--tabs-trigger-text:hover{color:var(--cds-text-01,#161616)}.bx--tabs-trigger-text:focus{outline:0}.bx--tabs__nav{box-shadow:0 2px 6px rgba(0,0,0,.2);margin:0;padding:0;position:absolute;list-style:none;display:flex;flex-direction:column;z-index:6000;background:var(--cds-ui-01,#f4f4f4);transition:max-height 70ms cubic-bezier(.2,0,.38,.9);max-height:600px;width:100%}@media (min-width:42rem){.bx--tabs__nav{flex-direction:row;background:0 0;box-shadow:none;z-index:auto;transition:inherit;width:auto}}.bx--tabs__nav--hidden{transition:max-height 70ms cubic-bezier(.2,0,.38,.9);overflow:hidden;max-height:0}@media (min-width:42rem){.bx--tabs__nav--hidden{display:flex;transition:inherit;overflow-x:auto;max-width:100%;max-height:none}}.bx--tabs__nav-item,:host(bx-tab){box-sizing:border-box;margin:0;padding:0;border:0;font-size:100%;font-family:inherit;vertical-align:baseline;background-color:var(--cds-ui-01,#f4f4f4);display:flex;padding:0;cursor:pointer;width:100%;height:2.5rem;transition:background-color 70ms cubic-bezier(.2,0,.38,.9)}.bx--tabs__nav-item *,.bx--tabs__nav-item ::after,.bx--tabs__nav-item ::before,:host(bx-tab) *,:host(bx-tab) ::after,:host(bx-tab) ::before{box-sizing:inherit}@media (min-width:42rem){.bx--tabs__nav-item,:host(bx-tab){background:0 0;height:auto}.bx--tabs__nav-item+.bx--tabs__nav-item,.bx--tabs__nav-item+:host(bx-tab),:host(bx-tab)+.bx--tabs__nav-item,:host(bx-tab)+:host(bx-tab){margin-right:.0625rem}}@media (min-width:42rem){.bx--tabs--container .bx--tabs__nav-item,.bx--tabs--container :host(bx-tab),:host(bx-tabs[type=container]) .bx--tabs__nav-item,:host(bx-tabs[type=container]) :host(bx-tab){background-color:var(--cds-ui-03,#e0e0e0)}.bx--tabs--container .bx--tabs__nav-item+.bx--tabs__nav-item,.bx--tabs--container .bx--tabs__nav-item+:host(bx-tab),.bx--tabs--container :host(bx-tab)+.bx--tabs__nav-item,.bx--tabs--container :host(bx-tab)+:host(bx-tab),:host(bx-tabs[type=container]) .bx--tabs__nav-item+.bx--tabs__nav-item,:host(bx-tabs[type=container]) .bx--tabs__nav-item+:host(bx-tab),:host(bx-tabs[type=container]) :host(bx-tab)+.bx--tabs__nav-item,:host(bx-tabs[type=container]) :host(bx-tab)+:host(bx-tab){margin-right:0;box-shadow:1px 0 0 0 var(--cds-ui-04,#8d8d8d)}.bx--tabs--container .bx--tabs__nav-item+.bx--tabs__nav-item.bx--tabs__nav-item--selected,.bx--tabs--container .bx--tabs__nav-item+:host(bx-tab.bx--tabs__nav-item--selected),.bx--tabs--container .bx--tabs__nav-item.bx--tabs__nav-item--selected+.bx--tabs__nav-item,.bx--tabs--container .bx--tabs__nav-item.bx--tabs__nav-item--selected+:host(bx-tab),.bx--tabs--container :host(bx-tab)+.bx--tabs__nav-item.bx--tabs__nav-item--selected,.bx--tabs--container :host(bx-tab)+:host(bx-tab.bx--tabs__nav-item--selected),.bx--tabs--container :host(bx-tab.bx--tabs__nav-item--selected)+.bx--tabs__nav-item,.bx--tabs--container :host(bx-tab.bx--tabs__nav-item--selected)+:host(bx-tab),:host(bx-tabs[type=container]) .bx--tabs__nav-item+.bx--tabs__nav-item.bx--tabs__nav-item--selected,:host(bx-tabs[type=container]) .bx--tabs__nav-item+:host(bx-tab.bx--tabs__nav-item--selected),:host(bx-tabs[type=container]) .bx--tabs__nav-item.bx--tabs__nav-item--selected+.bx--tabs__nav-item,:host(bx-tabs[type=container]) .bx--tabs__nav-item.bx--tabs__nav-item--selected+:host(bx-tab),:host(bx-tabs[type=container]) :host(bx-tab)+.bx--tabs__nav-item.bx--tabs__nav-item--selected,:host(bx-tabs[type=container]) :host(bx-tab)+:host(bx-tab.bx--tabs__nav-item--selected),:host(bx-tabs[type=container]) :host(bx-tab.bx--tabs__nav-item--selected)+.bx--tabs__nav-item,:host(bx-tabs[type=container]) :host(bx-tab.bx--tabs__nav-item--selected)+:host(bx-tab){box-shadow:none}}.bx--tabs__nav-item .bx--tabs__nav-link,:host(bx-tab) .bx--tabs__nav-link{transition:color 70ms cubic-bezier(.2,0,.38,.9),border-bottom-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}@media (min-width:42rem){.bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--selected),:host(bx-tab:hover:not(.bx--tabs__nav-item--selected)){background:0 0}}.bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--disabled),:host(bx-tab:hover:not(.bx--tabs__nav-item--disabled)){background-color:var(--cds-hover-ui,#e5e5e5);box-shadow:0 -1px 0 var(--cds-hover-ui,#e5e5e5)}@media (min-width:42rem){.bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--disabled),:host(bx-tab:hover:not(.bx--tabs__nav-item--disabled)){background-color:transparent}.bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--disabled)+.bx--tabs__nav-item,.bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--disabled)+:host(bx-tab),:host(bx-tab:hover:not(.bx--tabs__nav-item--disabled))+.bx--tabs__nav-item,:host(bx-tab:hover:not(.bx--tabs__nav-item--disabled))+:host(bx-tab){box-shadow:none}}@media (min-width:42rem){.bx--tabs--container .bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--disabled),.bx--tabs--container :host(bx-tab:hover:not(.bx--tabs__nav-item--disabled)),:host(bx-tabs[type=container]) .bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--disabled),:host(bx-tabs[type=container]) :host(bx-tab:hover:not(.bx--tabs__nav-item--disabled)){background-color:var(--cds-hover-selected-ui,#cacaca)}}.bx--tabs__nav-item--disabled,.bx--tabs__nav-item--disabled:hover{cursor:not-allowed;outline:0}@media (min-width:42rem){.bx--tabs--container .bx--tabs__nav-item.bx--tabs__nav-item--disabled,.bx--tabs--container .bx--tabs__nav-item.bx--tabs__nav-item--disabled:hover,.bx--tabs--container :host(bx-tab.bx--tabs__nav-item--disabled),.bx--tabs--container :host(bx-tab.bx--tabs__nav-item--disabled:hover),:host(bx-tabs[type=container]) .bx--tabs__nav-item.bx--tabs__nav-item--disabled,:host(bx-tabs[type=container]) .bx--tabs__nav-item.bx--tabs__nav-item--disabled:hover,:host(bx-tabs[type=container]) :host(bx-tab.bx--tabs__nav-item--disabled),:host(bx-tabs[type=container]) :host(bx-tab.bx--tabs__nav-item--disabled:hover){background-color:var(--cds-disabled-02,#c6c6c6)}}@media (min-width:42rem){.bx--tabs--container .bx--tabs__nav-item--disabled .bx--tabs__nav-link,:host(bx-tabs[type=container]) .bx--tabs__nav-item--disabled .bx--tabs__nav-link{color:var(--cds-disabled-03,#8d8d8d);border-bottom:none}}.bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled){border:none;display:none;transition:color 70ms cubic-bezier(.2,0,.38,.9)}@media (min-width:42rem){.bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled){display:flex}.bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link,.bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:active,.bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:focus{font-size:var(--cds-productive-heading-01-font-size,.875rem);font-weight:var(--cds-productive-heading-01-font-weight,600);line-height:var(--cds-productive-heading-01-line-height,1.125rem);letter-spacing:var(--cds-productive-heading-01-letter-spacing,.16px);color:var(--cds-text-01,#161616);border-bottom:2px solid var(--cds-interactive-04,#0f62fe)}}@media (min-width:42rem){.bx--tabs--container .bx--tabs__nav-item--selected:hover:not(.bx--tabs__nav-item--disabled),.bx--tabs--container .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled),:host(bx-tabs[type=container]) .bx--tabs__nav-item--selected:hover:not(.bx--tabs__nav-item--disabled),:host(bx-tabs[type=container]) .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled){background-color:var(--cds-ui-01,#f4f4f4)}.bx--tabs--container .bx--tabs__nav-item--selected:hover:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link,.bx--tabs--container .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link,:host(bx-tabs[type=container]) .bx--tabs__nav-item--selected:hover:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link,:host(bx-tabs[type=container]) .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link{line-height:calc(3rem - (var(--cds-spacing-03,.5rem) * 2));box-shadow:inset 0 2px 0 0 var(--cds-interactive-04,#0f62fe);border-bottom:none;padding:var(--cds-spacing-03,.5rem) var(--cds-spacing-05,1rem)}.bx--tabs--container .bx--tabs__nav-item--selected:hover:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:active,.bx--tabs--container .bx--tabs__nav-item--selected:hover:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:focus,.bx--tabs--container .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:active,.bx--tabs--container .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:focus,:host(bx-tabs[type=container]) .bx--tabs__nav-item--selected:hover:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:active,:host(bx-tabs[type=container]) .bx--tabs__nav-item--selected:hover:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:focus,:host(bx-tabs[type=container]) .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:active,:host(bx-tabs[type=container]) .bx--tabs__nav-item--selected:not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link:focus{box-shadow:none}}a.bx--tabs__nav-link{outline:2px solid transparent;outline-offset:-2px;display:inline-block;color:var(--cds-text-02,#525252);text-decoration:none;font-weight:400;padding:var(--cds-spacing-04,.75rem) 0;width:calc(100% - 32px);height:2.5rem;white-space:nowrap;text-overflow:ellipsis;margin:0 var(--cds-spacing-05,1rem);line-height:1rem;border-bottom:1px solid var(--cds-ui-03,#e0e0e0);overflow:hidden;transition:border 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}a.bx--tabs__nav-link:active,a.bx--tabs__nav-link:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;width:100%;margin:0;padding-right:16px}@media (min-width:42rem){a.bx--tabs__nav-link{border-bottom:2px solid var(--cds-ui-03,#e0e0e0);padding:var(--cds-spacing-04,.75rem) var(--cds-spacing-05,1rem) var(--cds-spacing-03,.5rem);width:10rem;margin:0;line-height:inherit}a.bx--tabs__nav-link:active,a.bx--tabs__nav-link:focus{width:10rem;border-bottom:2px}}@media (min-width:42rem){.bx--tabs--container a.bx--tabs__nav-link,:host(bx-tabs[type=container]) a.bx--tabs__nav-link{height:3rem;line-height:calc(3rem - (var(--cds-spacing-03,.5rem) * 2));border-bottom:none;padding:var(--cds-spacing-03,.5rem) var(--cds-spacing-05,1rem)}}.bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link,:host(bx-tab:hover:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled)) .bx--tabs__nav-link{color:var(--cds-text-01,#161616)}@media (min-width:42rem){.bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link,:host(bx-tab:hover:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled)) .bx--tabs__nav-link{color:var(--cds-text-01,#161616);border-bottom:2px solid var(--cds-ui-04,#8d8d8d)}}@media (min-width:42rem){.bx--tabs--container .bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link,.bx--tabs--container :host(bx-tab:hover:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled)) .bx--tabs__nav-link,:host(bx-tabs[type=container]) .bx--tabs__nav-item:hover:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled) .bx--tabs__nav-link,:host(bx-tabs[type=container]) :host(bx-tab:hover:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled)) .bx--tabs__nav-link{border-bottom:none}}.bx--tabs__nav-item--disabled .bx--tabs__nav-link{color:var(--cds-disabled-02,#c6c6c6);border-bottom:2px solid var(--cds-disabled-01,#f4f4f4);pointer-events:none}.bx--tabs__nav-item--disabled:hover .bx--tabs__nav-link{cursor:no-drop;border-bottom:2px solid var(--cds-disabled-01,#f4f4f4)}.bx--tabs__nav-item--disabled .bx--tabs__nav-link:focus,.bx--tabs__nav-item--disabled a.bx--tabs__nav-link:active{outline:0;border-bottom:2px solid var(--cds-disabled-01,#f4f4f4)}.bx--tabs__nav-item:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled):not(.bx--tabs__nav-item--selected) .bx--tabs__nav-link:focus,.bx--tabs__nav-item:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled):not(.bx--tabs__nav-item--selected) a.bx--tabs__nav-link:active,:host(bx-tab:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled):not(.bx--tabs__nav-item--selected)) .bx--tabs__nav-link:focus,:host(bx-tab:not(.bx--tabs__nav-item--selected):not(.bx--tabs__nav-item--disabled):not(.bx--tabs__nav-item--selected)) a.bx--tabs__nav-link:active{color:var(--cds-text-02,#525252)}.bx--tab-content{padding:1rem}.bx--tabs.bx--skeleton,:host(bx-tabs-skeleton.bx--skeleton),:host(bx-tabs.bx--skeleton){pointer-events:none;cursor:default}.bx--tabs.bx--skeleton .bx--tabs__nav-link,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs__nav-link,:host(bx-tabs.bx--skeleton) .bx--tabs__nav-link{position:relative;border:none;padding:0;box-shadow:none;pointer-events:none;background:var(--cds-skeleton-01,#e5e5e5);width:4.6875rem;height:.75rem}.bx--tabs.bx--skeleton .bx--tabs__nav-link:active,.bx--tabs.bx--skeleton .bx--tabs__nav-link:focus,.bx--tabs.bx--skeleton .bx--tabs__nav-link:hover,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs__nav-link:active,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs__nav-link:focus,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs__nav-link:hover,:host(bx-tabs.bx--skeleton) .bx--tabs__nav-link:active,:host(bx-tabs.bx--skeleton) .bx--tabs__nav-link:focus,:host(bx-tabs.bx--skeleton) .bx--tabs__nav-link:hover{border:none;outline:0;cursor:default}.bx--tabs.bx--skeleton .bx--tabs__nav-link::before,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs__nav-link::before,:host(bx-tabs.bx--skeleton) .bx--tabs__nav-link::before{content:'';width:0%;height:100%;position:absolute;top:0;right:0;background:var(--cds-skeleton-02,#c6c6c6);-webkit-animation:3s ease-in-out skeleton infinite;animation:3s ease-in-out skeleton infinite}@media (prefers-reduced-motion:reduce){.bx--tabs.bx--skeleton .bx--tabs__nav-link::before,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs__nav-link::before,:host(bx-tabs.bx--skeleton) .bx--tabs__nav-link::before{-webkit-animation:none;animation:none}}.bx--tabs.bx--skeleton .bx--tabs-trigger,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs-trigger,:host(bx-tabs.bx--skeleton) .bx--tabs-trigger{position:relative;border:none;padding:0;box-shadow:none;pointer-events:none;background:var(--cds-skeleton-01,#e5e5e5);width:6.25rem}.bx--tabs.bx--skeleton .bx--tabs-trigger:active,.bx--tabs.bx--skeleton .bx--tabs-trigger:focus,.bx--tabs.bx--skeleton .bx--tabs-trigger:hover,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs-trigger:active,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs-trigger:focus,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs-trigger:hover,:host(bx-tabs.bx--skeleton) .bx--tabs-trigger:active,:host(bx-tabs.bx--skeleton) .bx--tabs-trigger:focus,:host(bx-tabs.bx--skeleton) .bx--tabs-trigger:hover{border:none;outline:0;cursor:default}.bx--tabs.bx--skeleton .bx--tabs-trigger::before,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs-trigger::before,:host(bx-tabs.bx--skeleton) .bx--tabs-trigger::before{content:'';width:0%;height:100%;position:absolute;top:0;right:0;background:var(--cds-skeleton-02,#c6c6c6);-webkit-animation:3s ease-in-out skeleton infinite;animation:3s ease-in-out skeleton infinite}@media (prefers-reduced-motion:reduce){.bx--tabs.bx--skeleton .bx--tabs-trigger::before,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs-trigger::before,:host(bx-tabs.bx--skeleton) .bx--tabs-trigger::before{-webkit-animation:none;animation:none}}.bx--tabs.bx--skeleton .bx--tabs-trigger svg,:host(bx-tabs-skeleton.bx--skeleton) .bx--tabs-trigger svg,:host(bx-tabs.bx--skeleton) .bx--tabs-trigger svg{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;visibility:inherit;white-space:nowrap}:host(bx-tabs){outline:2px solid transparent;outline-offset:-2px}:host(bx-tabs) .bx--tabs-trigger svg{width:auto;height:auto}:host(bx-tabs:focus) .bx--tabs-trigger{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(bx-tab){outline:0}:host(bx-tab) .bx--tabs__nav-link:active{outline:2px solid transparent;outline-offset:-2px}:host(bx-tab:hover){background-color:var(--cds-hover-ui,#e5e5e5);box-shadow:0 -1px 0 var(--cds-hover-ui,#e5e5e5)}@media (min-width:42rem){:host(bx-tab:hover){background-color:transparent;box-shadow:none}}@media (min-width:42rem){:host(bx-tab[type=container]){background-color:var(--cds-ui-03,#e0e0e0)}:host(bx-tab[type=container])+.bx--tabs__nav-item,:host(bx-tab[type=container])+:host(bx-tab){margin-right:0;box-shadow:1px 0 0 0 var(--cds-ui-04,#8d8d8d)}:host(bx-tab[type=container])+.bx--tabs__nav-item.bx--tabs__nav-item--selected,:host(bx-tab[type=container])+:host(bx-tab.bx--tabs__nav-item--selected),:host(bx-tab[type=container].bx--tabs__nav-item--selected)+.bx--tabs__nav-item,:host(bx-tab[type=container].bx--tabs__nav-item--selected)+:host(bx-tab){box-shadow:none}}@media (min-width:42rem){:host(bx-tab[type=container]:hover){background-color:var(--cds-hover-selected-ui,#cacaca)}}@media (min-width:42rem){:host(bx-tab[type=container]) a.bx--tabs__nav-link{height:3rem;line-height:calc(3rem - (var(--cds-spacing-03,.5rem) * 2))}}@media (min-width:42rem){:host(bx-tab[type=container][role]) a.bx--tabs__nav-link,:host(bx-tab[type=container][role]:hover) a.bx--tabs__nav-link{border-bottom:none}}:host(bx-tab[disabled][role]),:host(bx-tab[disabled][role]:hover){background-color:var(--cds-ui-01,#f4f4f4);box-shadow:none;cursor:not-allowed;outline:0}@media (min-width:42rem){:host(bx-tab[disabled][role]),:host(bx-tab[disabled][role]:hover){background-color:transparent}}:host(bx-tab[disabled][role]) .bx--tabs__nav-link,:host(bx-tab[disabled][role]:hover) .bx--tabs__nav-link{color:var(--cds-disabled-02,#c6c6c6);pointer-events:none}@media (min-width:42rem){:host(bx-tab[disabled][role]) .bx--tabs__nav-link,:host(bx-tab[disabled][role]:hover) .bx--tabs__nav-link{border-bottom:2px solid var(--cds-disabled-01,#f4f4f4)}}@media (min-width:42rem){:host(bx-tab[type=container][disabled][role]),:host(bx-tab[type=container][disabled][role]:hover){background-color:var(--cds-disabled-02,#c6c6c6)}}@media (min-width:42rem){:host(bx-tab[type=container][disabled][role]) .bx--tabs__nav-link{color:var(--cds-disabled-03,#8d8d8d)}}:host(bx-tab[selected]){background-color:var(--cds-hover-ui,#e5e5e5);transition:color 70ms cubic-bezier(.2,0,.38,.9)}:host(bx-tab[selected]:hover){background-color:var(--cds-selected-ui,#e0e0e0)}@media (min-width:42rem){:host(bx-tab[selected]:hover){background-color:transparent}}:host(bx-tab[selected]) .bx--tabs__nav-link,:host(bx-tab[selected]) .bx--tabs__nav-link:active,:host(bx-tab[selected]) .bx--tabs__nav-link:focus{color:var(--cds-text-01,#161616)}@media (min-width:42rem){:host(bx-tab[selected]){display:flex;background-color:transparent}:host(bx-tab[selected]) .bx--tabs__nav-link{font-size:var(--cds-heading-01-font-size,.875rem);font-weight:var(--cds-heading-01-font-weight,600);line-height:var(--cds-heading-01-line-height,1.125rem);letter-spacing:var(--cds-heading-01-letter-spacing,.16px);border-bottom:3px solid var(--cds-interactive-01,#0f62fe)}:host(bx-tab[selected]) .bx--tabs__nav-link:active,:host(bx-tab[selected]) .bx--tabs__nav-link:focus{border-bottom-width:2px}}@media (min-width:42rem){:host(bx-tab[type=container][selected]),:host(bx-tab[type=container][selected]:hover){background-color:var(--cds-ui-01,#f4f4f4)}:host(bx-tab[type=container][selected]) .bx--tabs__nav-link,:host(bx-tab[type=container][selected]:hover) .bx--tabs__nav-link{line-height:calc(3rem - (var(--cds-spacing-03,.5rem) * 2));box-shadow:inset 0 2px 0 0 var(--cds-interactive-04,#0f62fe);border-bottom:none}:host(bx-tab[type=container][selected]) .bx--tabs__nav-link:active,:host(bx-tab[type=container][selected]) .bx--tabs__nav-link:focus,:host(bx-tab[type=container][selected]:hover) .bx--tabs__nav-link:active,:host(bx-tab[type=container][selected]:hover) .bx--tabs__nav-link:focus{box-shadow:none}}:host(bx-tab[highlighted]),:host(bx-tab[highlighted]:hover){background-color:var(--cds-hover-ui,#e5e5e5);box-shadow:0 -1px 0 var(--cds-hover-ui,#e5e5e5)}@media (min-width:42rem){:host(bx-tab[highlighted]),:host(bx-tab[highlighted]:hover){background-color:transparent;box-shadow:none}}@media (min-width:42rem){:host(bx-tab[in-focus][selected]),:host(bx-tab[in-focus][selected]:hover){outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(bx-tab[in-focus][selected]) a.bx--tabs__nav-link[role],:host(bx-tab[in-focus][selected]:hover) a.bx--tabs__nav-link[role]{border-bottom-width:2px}}:host(bx-tab[highlighted][selected]),:host(bx-tab[highlighted][selected]:hover){background-color:var(--cds-selected-ui,#e0e0e0)}@media (min-width:42rem){:host(bx-tab[highlighted][selected]),:host(bx-tab[highlighted][selected]:hover){background-color:transparent}}:host(bx-tab[disabled][in-focus][selected]),:host(bx-tab[disabled][in-focus][selected]:hover),:host(bx-tab[disabled][selected]),:host(bx-tab[disabled][selected]:hover){display:flex;background-color:var(--cds-ui-01,#f4f4f4);box-shadow:none}@media (min-width:42rem){:host(bx-tab[disabled][in-focus][selected]),:host(bx-tab[disabled][in-focus][selected]:hover),:host(bx-tab[disabled][selected]),:host(bx-tab[disabled][selected]:hover){outline:2px solid transparent;outline-offset:-2px;background-color:transparent}}@media (min-width:42rem){:host(bx-tab[disabled][in-focus][selected]) .bx--tabs__nav-link,:host(bx-tab[disabled][in-focus][selected]:hover) .bx--tabs__nav-link,:host(bx-tab[disabled][selected]) .bx--tabs__nav-link,:host(bx-tab[disabled][selected]:hover) .bx--tabs__nav-link{font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.125rem);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);color:var(--cds-disabled-02,#c6c6c6);border-bottom:2px solid var(--cds-disabled-01,#f4f4f4)}:host(bx-tab[disabled][in-focus][selected]) .bx--tabs__nav-link:active,:host(bx-tab[disabled][in-focus][selected]) .bx--tabs__nav-link:focus,:host(bx-tab[disabled][in-focus][selected]:hover) .bx--tabs__nav-link:active,:host(bx-tab[disabled][in-focus][selected]:hover) .bx--tabs__nav-link:focus,:host(bx-tab[disabled][selected]) .bx--tabs__nav-link:active,:host(bx-tab[disabled][selected]) .bx--tabs__nav-link:focus,:host(bx-tab[disabled][selected]:hover) .bx--tabs__nav-link:active,:host(bx-tab[disabled][selected]:hover) .bx--tabs__nav-link:focus{border-bottom-width:3px}}:host(bx-tabs-skeleton) .bx--tabs-trigger{position:relative;border:none;padding:0;box-shadow:none;pointer-events:none;background:var(--cds-skeleton-01,#e5e5e5);width:6.25rem}:host(bx-tabs-skeleton) .bx--tabs-trigger:active,:host(bx-tabs-skeleton) .bx--tabs-trigger:focus,:host(bx-tabs-skeleton) .bx--tabs-trigger:hover{border:none;outline:0;cursor:default}:host(bx-tabs-skeleton) .bx--tabs-trigger::before{content:'';width:0%;height:100%;position:absolute;top:0;right:0;background:var(--cds-skeleton-02,#c6c6c6);-webkit-animation:3s ease-in-out skeleton infinite;animation:3s ease-in-out skeleton infinite}@media (prefers-reduced-motion:reduce){:host(bx-tabs-skeleton) .bx--tabs-trigger::before{-webkit-animation:none;animation:none}}@media (min-width:42rem){:host(bx-tab-skeleton){margin-right:.125rem}}:host(bx-tab-skeleton) .bx--tabs__nav-link{position:relative;border:none;padding:0;box-shadow:none;pointer-events:none;background:var(--cds-skeleton-01,#e5e5e5);width:4.6875rem;height:.75rem}:host(bx-tab-skeleton) .bx--tabs__nav-link:active,:host(bx-tab-skeleton) .bx--tabs__nav-link:focus,:host(bx-tab-skeleton) .bx--tabs__nav-link:hover{border:none;outline:0;cursor:default}:host(bx-tab-skeleton) .bx--tabs__nav-link::before{content:'';width:0%;height:100%;position:absolute;top:0;right:0;background:var(--cds-skeleton-02,#c6c6c6);-webkit-animation:3s ease-in-out skeleton infinite;animation:3s ease-in-out skeleton infinite}@media (prefers-reduced-motion:reduce){:host(bx-tab-skeleton) .bx--tabs__nav-link::before{-webkit-animation:none;animation:none}}@media (min-width:42rem){:host(bx-tab-skeleton:first-of-type){margin-right:0}}",
]);