@import(once) '/apps/scania-clientlibs/clientlibs/clientlib-site/less/variables.less';.cmp-tabs__header{display:flex;justify-content:space-between;border-bottom:1px solid @border;position:relative}
.cmp-tabs__tablist{display:flex;flex-wrap:nowrap;padding-left:0;list-style:none;overflow:hidden;white-space:nowrap}
.cmp-tabs__tablist--mobile{display:none;right:0;padding:0 @8-pixel-spacer;margin:0;position:absolute;top:100%;z-index:1000;float:left;min-width:10rem;font-size:@font-size-medium;font-weight:normal;text-align:left;list-style:none;background-clip:padding-box;background-color:#fff;border-radius:@4-pixel-spacer;border:@1-pixel-spacer solid @grey-400}
.cmp-tabs__tab{font-family:@font-family-semi-condensed-bold;font-size:@font-size-small;line-height:@16-pixel-spacer;padding:@16-pixel-spacer;box-sizing:border-box;color:#5F728C;//TODO:update to color variable when new colors implemented border-bottom:@2-pixel-spacer solid transparent;cursor:pointer;transition:color .3s ease,border-color .3s ease,outline-color .15s ease;outline:@2-pixel-spacer solid transparent;outline-offset:-@2-pixel-spacer;&:hover{color:@grey-950;border-bottom:@2-pixel-spacer solid #1c222b;//TODO:update to color variable when new colors implemented}
&:focus-visible{color:@grey-950;outline-color:#2a6ecf;//TODO:update to color variable when new colors implemented border-bottom:@2-pixel-spacer solid #1c222b !important;//TODO:update to color variable when new colors implemented}
&--active,&[aria-selected="true"]{border-color:inherit;color:@grey-950;border-bottom:@2-pixel-spacer solid @blue-400}
}
.cmp-tabs__tabpanel{display:none;&--active{display:block}
&[aria-hidden="false"]:focus-visible{outline:@2-pixel-spacer solid #2a6ecf;//TODO Update to color variable when new colors are implemented}
}
.cmp-tabs__move{display:none}
.cmp-tabs__button{color:@grey-950;background-color:transparent;border:0;padding:0 @16-pixel-spacer;font-size:@20-pixel-spacer;cursor:pointer;&.dropdown-toggle:focus-visible{outline:@2-pixel-spacer solid #2a6ecf;//TODO Update to color variable when new colors are implemented}
&:disabled,&[hidden]{cursor:default;color:rgba(58,81,124,0.349);//TODO Update to color variable when new colors are implemented}
}
.cmp-tabs__button[aria-expanded="true"] + .cmp-tabs__tablist--mobile{display:block;//show when the toggle is expanded on sibling)}
.cmp-tabs__tab.dropdown-item{display:flex;padding:@16-pixel-spacer @8-pixel-spacer;background-color:@white;border-top:1px solid @grey-100;font-family:@font-family-semi-condensed;opacity:1;cursor:pointer;box-sizing:border-box;color:@grey-958;white-space:normal}
div:focus{outline:0}
.tabs{&--left{.cmp-tabs__tablist{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
}
&--center{.cmp-tabs__tablist{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
.cmp-tabs__header{justify-content:center}
}
&--right{.cmp-tabs__tablist{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}
.cmp-tabs__header{flex-flow:row-reverse}
.cmp-tabs__tablist{flex-flow:row-reverse}
.cmp-tabs__tablist--mobile{right:initial;left:0}
.cmp-tabs__move{flex-flow:row-reverse}
.cmp-tabs__button{transform:rotateY(180deg)}
}
}
.tabs{.cmp-text{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;table{width:100%;max-width:100%;td,th{word-break:normal}
}
}
}
.cmp-tabs>.cmp-tabs__tabpanel{display:block;height:0;overflow-y:hidden}
.cmp-tabs>.cmp-tabs__tabpanel--active{height:auto;overflow-y:visible}
.tabs--blue{.cmp-tabs{&__header{background-color:@blue-800}
&__tab{color:#93A2B7;//TODO Update to color variable when new colors are implemented &--active,&:hover,&:focus-visible{color:#f6f7f9;//TODO Update to color variable when new colors are implemented}
&--active{border-bottom:@2-pixel-spacer solid @blue-300 !important}
&:hover{border-bottom:@2-pixel-spacer solid #f6f7f9;//TODO Update to color variable when new colors are implemented}
&:focus-visible{outline-color:@blue-300;//TODO:update to color variable when new colors implemented border-bottom:@2-pixel-spacer solid #f6f7f9 !important;//TODO:update to color variable when new colors implemented}
&.dropdown-item{opacity:1;padding:@16-pixel-spacer @8-pixel-spacer;color:@grey-958}
}
&__button{color:#F6F7F9;//TODO Update to color variable when new colors are implemented &:disabled{color:rgba(174,208,255,0.49);//TODO Update to color variable when new colors are implemented}
}
}
}
@media(min-width:@screen-md){.cmp-tabs__tablist{overflow:visible}
.cmp-tabs__tab{outline-offset:@2-pixel-spacer}
.cmp-tabs__move{display:inline-flex}
.cmp-tabs__button.dropdown-toggle{display:none}
}