@sms-frontend/components/lib/Tabs/style/index.css

SMS Design React UI Library.

.sms-icon-hover.sms-tabs-icon-hover::before{width:16px;height:16px}.sms-tabs .sms-tabs-icon-hover{font-size:12px;color:var(--color-text-2);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sms-tabs-dropdown-icon{font-size:12px;margin-left:6px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sms-tabs-close-icon{margin-left:8px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sms-tabs-add-icon{font-size:12px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:0 8px}.sms-tabs-add{position:relative}.sms-tabs-left-icon{margin-left:10px;margin-right:6px}.sms-tabs-right-icon{margin-right:10px;margin-left:6px}.sms-tabs-up-icon{margin-bottom:10px}.sms-tabs-down-icon{margin-top:10px}.sms-tabs-nav-icon-disabled{cursor:not-allowed;color:var(--color-text-4)}.sms-tabs{position:relative;overflow:hidden}.sms-tabs-header-nav{position:relative}.sms-tabs-header-nav::before{content:'';clear:both;position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--color-neutral-3);display:block}.sms-tabs-header-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:hidden;-webkit-box-flex:1;-ms-flex:1;flex:1}.sms-tabs-header{position:relative;display:inline-block;-webkit-transition:-webkit-transform .2s cubic-bezier(.34,.69,.1,1);transition:-webkit-transform .2s cubic-bezier(.34,.69,.1,1);transition:transform .2s cubic-bezier(.34,.69,.1,1);transition:transform .2s cubic-bezier(.34,.69,.1,1),-webkit-transform .2s cubic-bezier(.34,.69,.1,1);white-space:nowrap}.sms-tabs-header-extra{width:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:32px}.sms-tabs-header-extra .sms-tabs-add-icon{padding-left:0}.sms-tabs-header-title{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:14px;cursor:pointer;color:var(--color-text-2);-webkit-transition:color .2s cubic-bezier(0,0,1,1);transition:color .2s cubic-bezier(0,0,1,1);display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1.5715;padding:4px 0}.sms-tabs-header-title-text{display:inline-block}.sms-tabs-header-title:hover{color:var(--color-text-2);font-weight:400}.sms-tabs-header-title-disabled,.sms-tabs-header-title-disabled:hover{color:var(--color-text-4);cursor:not-allowed}.sms-tabs-header-title-active,.sms-tabs-header-title-active:hover{color:rgb(var(--primary-6));font-weight:500}.sms-tabs-header-title-active.sms-tabs-header-title-disabled,.sms-tabs-header-title-active:hover.sms-tabs-header-title-disabled{color:var(--color-primary-light-3)}.sms-tabs-header-ink{position:absolute;bottom:0;right:initial;top:initial;height:2px;background-color:rgb(var(--primary-6));-webkit-transition:left .2s cubic-bezier(.34,.69,.1,1),width .2s cubic-bezier(.34,.69,.1,1);transition:left .2s cubic-bezier(.34,.69,.1,1),width .2s cubic-bezier(.34,.69,.1,1)}.sms-tabs-header-ink.sms-tabs-header-ink-no-animation{-webkit-transition:none;transition:none}.sms-tabs-header-ink-disabled{background-color:var(--color-primary-light-3)}.sms-tabs-header-nav-line .sms-tabs-header-extra{line-height:40px}.sms-tabs-header-nav-line .sms-tabs-header-title{line-height:1.5715;margin:0 16px;padding:8px 0}.sms-tabs-header-nav-line .sms-tabs-header-title-text{display:inline-block;position:relative;padding:1px 0}.sms-tabs-header-nav-line .sms-tabs-header-title-text::before{content:'';z-index:-1;opacity:1;-webkit-transition:all .2s cubic-bezier(0,0,1,1);transition:all .2s cubic-bezier(0,0,1,1);border-radius:var(--border-radius-small);position:absolute;top:0;bottom:0;left:-8px;right:-8px;background-color:transparent}.sms-tabs-header-nav-line .sms-tabs-header-title:hover .sms-tabs-header-title-text::before{background-color:var(--color-fill-2)}.sms-tabs-header-nav-line .sms-tabs-header-title-active .sms-tabs-header-title-text::before,.sms-tabs-header-nav-line .sms-tabs-header-title-active:hover .sms-tabs-header-title-text::before{background-color:transparent}.sms-tabs-header-nav-line .sms-tabs-header-title-disabled .sms-tabs-header-title-text::before,.sms-tabs-header-nav-line .sms-tabs-header-title-disabled:hover .sms-tabs-header-title-text::before{opacity:0}.sms-tabs-header-nav-line.sms-tabs-header-nav-horizontal>.sms-tabs-header-scroll .sms-tabs-header-title:first-of-type{margin-left:16px}.sms-tabs-header-nav-line.sms-tabs-header-nav-horizontal .sms-tabs-header-no-padding>.sms-tabs-header-title:first-of-type,.sms-tabs-header-nav-text.sms-tabs-header-nav-horizontal .sms-tabs-header-no-padding>.sms-tabs-header-title:first-of-type{margin-left:0}.sms-tabs-header-nav-card .sms-tabs-header-title,.sms-tabs-header-nav-card-gutter .sms-tabs-header-title{font-size:14px;border:1px solid var(--color-neutral-3);-webkit-transition:padding .2s cubic-bezier(0,0,1,1),color .2s cubic-bezier(0,0,1,1);transition:padding .2s cubic-bezier(0,0,1,1),color .2s cubic-bezier(0,0,1,1);padding:4px 16px}.sms-tabs-header-nav-card .sms-tabs-header-title-editable,.sms-tabs-header-nav-card-gutter .sms-tabs-header-title-editable{padding-right:12px}.sms-tabs-header-nav-card .sms-tabs-header-title-editable:not(.sms-tabs-header-title-active):hover .sms-icon-hover:hover::before,.sms-tabs-header-nav-card-gutter .sms-tabs-header-title-editable:not(.sms-tabs-header-title-active):hover .sms-icon-hover:hover::before{background-color:var(--color-fill-4)}.sms-tabs-header-nav-card .sms-tabs-add-icon,.sms-tabs-header-nav-card-gutter .sms-tabs-add-icon{height:32px}.sms-tabs-header-nav-card .sms-tabs-header-title{border-right:none;background-color:transparent}.sms-tabs-header-nav-card .sms-tabs-header-title:last-child{border-right:1px solid var(--color-neutral-3);border-top-right-radius:var(--border-radius-small)}.sms-tabs-header-nav-card .sms-tabs-header-title:first-child{border-top-left-radius:var(--border-radius-small)}.sms-tabs-header-nav-card .sms-tabs-header-title:hover{background-color:var(--color-fill-3)}.sms-tabs-header-nav-card .sms-tabs-header-title-disabled,.sms-tabs-header-nav-card .sms-tabs-header-title-disabled:hover{background-color:transparent}.sms-tabs-header-nav-card .sms-tabs-header-title-active,.sms-tabs-header-nav-card .sms-tabs-header-title-active:hover{border-bottom-color:var(--color-bg-2);background-color:transparent}.sms-tabs-header-nav-card-gutter .sms-tabs-header-title{margin-left:4px;border-right:1px solid var(--color-neutral-3);background-color:var(--color-fill-1);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}.sms-tabs-header-nav-card-gutter .sms-tabs-header-title:hover{background-color:var(--color-fill-3)}.sms-tabs-header-nav-card-gutter .sms-tabs-header-title-disabled,.sms-tabs-header-nav-card-gutter .sms-tabs-header-title-disabled:hover{background-color:var(--color-fill-1)}.sms-tabs-header-nav-card-gutter .sms-tabs-header-title-active,.sms-tabs-header-nav-card-gutter .sms-tabs-header-title-active:hover{border-bottom-color:var(--color-bg-2);background-color:transparent}.sms-tabs-header-nav-card-gutter .sms-tabs-header-title:first-child{margin-left:0}.sms-tabs-header-nav-text::before{display:none}.sms-tabs-header-nav-text .sms-tabs-header-title{position:relative;line-height:1.5715;margin:0 9px;font-size:14px;padding:5px 0}.sms-tabs-header-nav-text .sms-tabs-header-title:not(:first-of-type)::before{height:12px;position:absolute;width:2px;background-color:var(--color-fill-3);content:'';display:block;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:-9px}.sms-tabs-header-nav-text .sms-tabs-header-title-text{padding-left:8px;padding-right:8px;background-color:transparent}.sms-tabs-header-nav-text .sms-tabs-header-title-text:hover{background-color:var(--color-fill-2)}.sms-tabs-header-nav-text .sms-tabs-header-title-active .sms-tabs-header-title-text,.sms-tabs-header-nav-text .sms-tabs-header-title-active .sms-tabs-header-title-text:hover{background-color:transparent}.sms-tabs-header-nav-text .sms-tabs-header-title-disabled .sms-tabs-header-title-text,.sms-tabs-header-nav-text .sms-tabs-header-title-disabled .sms-tabs-header-title-text:hover{background-color:transparent}.sms-tabs-header-nav-text .sms-tabs-header-title-active.sms-tabs-header-nav-text .sms-tabs-header-title-disabled .sms-tabs-header-title-text,.sms-tabs-header-nav-text .sms-tabs-header-title-active.sms-tabs-header-nav-text .sms-tabs-header-title-disabled .sms-tabs-header-title-text:hover{background-color:var(--color-primary-light-3)}.sms-tabs-header-nav-rounded::before{display:none}.sms-tabs-header-nav-rounded .sms-tabs-header-title{padding:5px 0;padding-left:16px;padding-right:16px;margin:0 6px;font-size:14px;background-color:transparent;border-radius:32px}.sms-tabs-header-nav-rounded .sms-tabs-header-title:hover{background-color:var(--color-fill-2)}.sms-tabs-header-nav-rounded .sms-tabs-header-title-disabled:hover{background-color:transparent}.sms-tabs-header-nav-rounded .sms-tabs-header-title-active,.sms-tabs-header-nav-rounded .sms-tabs-header-title-active:hover{background-color:var(--color-fill-2)}.sms-tabs-header-nav-capsule::before{display:none}.sms-tabs-header-nav-capsule .sms-tabs-header-wrapper{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.sms-tabs-header-nav-capsule .sms-tabs-header{line-height:1;background-color:var(--color-fill-2);border-radius:var(--border-radius-small);padding:3px 3px}.sms-tabs-header-nav-capsule .sms-tabs-header-title{line-height:26px;padding:0 12px;background-color:transparent;position:relative;font-size:14px;border-radius:var(--border-radius-small)}.sms-tabs-header-nav-capsule .sms-tabs-header-title:hover{background-color:var(--color-bg-2)}.sms-tabs-header-nav-capsule .sms-tabs-header-title-disabled:hover{background-color:unset}.sms-tabs-header-nav-capsule .sms-tabs-header-title-active,.sms-tabs-header-nav-capsule .sms-tabs-header-title-active:hover{background-color:var(--color-bg-2)}.sms-tabs-header-nav-capsule .sms-tabs-header-title-active+.sms-tabs-header-title::before,.sms-tabs-header-nav-capsule .sms-tabs-header-title-active::before,.sms-tabs-header-nav-capsule .sms-tabs-header-title-active:hover+.sms-tabs-header-title::before,.sms-tabs-header-nav-capsule .sms-tabs-header-title-active:hover::before{opacity:0}.sms-tabs-header-nav-capsule.sms-tabs-header-nav-horizontal .sms-tabs-header-title:not(:first-of-type){margin-left:3px}.sms-tabs-header-nav-capsule.sms-tabs-header-nav-horizontal .sms-tabs-header-title:not(:first-of-type)::before{position:absolute;top:50%;left:-2px;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:block;height:14px;width:1px;background-color:var(--color-fill-3);content:'';-webkit-transition:all .2s cubic-bezier(0,0,1,1);transition:all .2s cubic-bezier(0,0,1,1)}.sms-tabs-header-scroll{overflow:hidden;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.sms-tabs-content{width:100%;overflow:hidden;padding-top:16px;-webkit-box-sizing:border-box;box-sizing:border-box}.sms-tabs-content .sms-tabs-content-inner{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%}.sms-tabs-content .sms-tabs-content-item{width:100%;overflow:hidden;height:0;-ms-flex-negative:0;flex-shrink:0}.sms-tabs-content .sms-tabs-content-item.sms-tabs-content-item-active{height:auto}.sms-tabs-card-gutter>.sms-tabs-content,.sms-tabs-card>.sms-tabs-content{border:1px solid var(--color-neutral-3);border-top:none}.sms-tabs-animation.sms-tabs-content-inner{-webkit-transition:all .2s cubic-bezier(.34,.69,.1,1);transition:all .2s cubic-bezier(.34,.69,.1,1)}.sms-tabs-horizontal.sms-tabs-justify{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.sms-tabs-horizontal.sms-tabs-justify .sms-tabs-content,.sms-tabs-horizontal.sms-tabs-justify .sms-tabs-content-inner,.sms-tabs-horizontal.sms-tabs-justify .sms-tabs-pane{height:100%}.sms-tabs-header-size-mini.sms-tabs-header-nav-line .sms-tabs-header-extra{line-height:32px;font-size:12px}.sms-tabs-header-size-mini.sms-tabs-header-nav-line .sms-tabs-header-title{font-size:12px;padding-top:6px;padding-bottom:6px}.sms-tabs-header-size-mini.sms-tabs-header-nav-line .sms-tabs-header-extra{line-height:32px;font-size:12px}.sms-tabs-header-size-mini.sms-tabs-header-nav-card .sms-tabs-header-title,.sms-tabs-header-size-mini.sms-tabs-header-nav-card-gutter .sms-tabs-header-title{font-size:12px;padding-top:2px;padding-bottom:2px}.sms-tabs-header-size-mini.sms-tabs-header-nav-card .sms-tabs-header-extra,.sms-tabs-header-size-mini.sms-tabs-header-nav-card-gutter .sms-tabs-header-extra{line-height:24px;font-size:12px}.sms-tabs-header-size-mini.sms-tabs-header-nav-card .sms-tabs-add-icon,.sms-tabs-header-size-mini.sms-tabs-header-nav-card-gutter .sms-tabs-add-icon{height:24px}.sms-tabs-header-size-mini.sms-tabs-header-nav-capsule .sms-tabs-header-title{font-size:12px;line-height:18px}.sms-tabs-header-size-mini.sms-tabs-header-nav-capsule .sms-tabs-header-extra{line-height:24px;font-size:12px}.sms-tabs-header-size-small.sms-tabs-header-nav-line .sms-tabs-header-extra{line-height:36px;font-size:14px}.sms-tabs-header-size-small.sms-tabs-header-nav-line .sms-tabs-header-title{font-size:14px;padding-top:6px;padding-bottom:6px}.sms-tabs-header-size-small.sms-tabs-header-nav-line .sms-tabs-header-extra{line-height:36px;font-size:14px}.sms-tabs-header-size-small.sms-tabs-header-nav-card .sms-tabs-header-title,.sms-tabs-header-size-small.sms-tabs-header-nav-card-gutter .sms-tabs-header-title{font-size:14px;padding-top:2px;padding-bottom:2px}.sms-tabs-header-size-small.sms-tabs-header-nav-card .sms-tabs-header-extra,.sms-tabs-header-size-small.sms-tabs-header-nav-card-gutter .sms-tabs-header-extra{line-height:28px;font-size:14px}.sms-tabs-header-size-small.sms-tabs-header-nav-card .sms-tabs-add-icon,.sms-tabs-header-size-small.sms-tabs-header-nav-card-gutter .sms-tabs-add-icon{height:28px}.sms-tabs-header-size-small.sms-tabs-header-nav-capsule .sms-tabs-header-title{font-size:14px;line-height:22px}.sms-tabs-header-size-small.sms-tabs-header-nav-capsule .sms-tabs-header-extra{line-height:28px;font-size:14px}.sms-tabs-header-size-large.sms-tabs-header-nav-line .sms-tabs-header-extra{line-height:44px;font-size:14px}.sms-tabs-header-size-large.sms-tabs-header-nav-line .sms-tabs-header-title{font-size:14px;padding-top:10px;padding-bottom:10px}.sms-tabs-header-size-large.sms-tabs-header-nav-line .sms-tabs-header-extra{line-height:44px;font-size:14px}.sms-tabs-header-size-large.sms-tabs-header-nav-card .sms-tabs-header-title,.sms-tabs-header-size-large.sms-tabs-header-nav-card-gutter .sms-tabs-header-title{font-size:14px;padding-top:6px;padding-bottom:6px}.sms-tabs-header-size-large.sms-tabs-header-nav-card .sms-tabs-header-extra,.sms-tabs-header-size-large.sms-tabs-header-nav-card-gutter .sms-tabs-header-extra{line-height:36px;font-size:14px}.sms-tabs-header-size-large.sms-tabs-header-nav-card .sms-tabs-add-icon,.sms-tabs-header-size-large.sms-tabs-header-nav-card-gutter .sms-tabs-add-icon{height:36px}.sms-tabs-header-size-large.sms-tabs-header-nav-capsule .sms-tabs-header-title{font-size:14px;line-height:30px}.sms-tabs-header-size-large.sms-tabs-header-nav-capsule .sms-tabs-header-extra{line-height:36px;font-size:14px}.sms-tabs-header-nav-vertical{float:left;height:100%}.sms-tabs-header-nav-vertical::before{position:absolute;left:initial;bottom:0;right:0;top:0;width:1px;height:100%;clear:both}.sms-tabs-header-nav-vertical .sms-tabs-add-icon{margin-left:0;margin-top:8px;padding:0 16px;height:auto}.sms-tabs-header-nav-right{float:right}.sms-tabs-header-nav-vertical .sms-tabs-header{height:auto}.sms-tabs-header-nav-vertical .sms-tabs-header-scroll{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.sms-tabs-header-nav-vertical .sms-tabs-header-overflow-scroll{padding:6px 0}.sms-tabs-header-nav-vertical .sms-tabs-header-wrapper{height:100%;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.sms-tabs-header-nav-vertical .sms-tabs-header-ink{position:absolute;left:initial;right:0;bottom:initial;width:2px;-webkit-transition:top .2s cubic-bezier(.34,.69,.1,1),height .2s cubic-bezier(.34,.69,.1,1);transition:top .2s cubic-bezier(.34,.69,.1,1),height .2s cubic-bezier(.34,.69,.1,1)}.sms-tabs-header-nav-vertical .sms-tabs-header-title{display:block;white-space:nowrap;margin:0;margin-top:12px}.sms-tabs-header-nav-vertical .sms-tabs-header-title:first-of-type{margin-top:0}.sms-tabs-header-nav-right::before{right:unset;left:0}.sms-tabs-header-nav-right .sms-tabs-header-ink{left:0;right:unset}.sms-tabs-header-nav-vertical .sms-tabs-header-scroll{position:relative;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.sms-tabs-header-nav-line.sms-tabs-header-nav-vertical .sms-tabs-header-title{padding:0 20px}.sms-tabs-header-nav-vertical.sms-tabs-header-nav-card .sms-tabs-header-title{margin:0;position:relative;border:1px solid var(--color-neutral-3);border-bottom-color:transparent}.sms-tabs-header-nav-vertical.sms-tabs-header-nav-card .sms-tabs-header-title:first-child{border-top-left-radius:var(--border-radius-small)}.sms-tabs-header-nav-vertical.sms-tabs-header-nav-card .sms-tabs-header-title-active,.sms-tabs-header-nav-vertical.sms-tabs-header-nav-card .sms-tabs-header-title-active:hover{border-bottom-color:transparent;border-right-color:var(--color-bg-2)}.sms-tabs-header-nav-vertical.sms-tabs-header-nav-card .sms-tabs-header-title:last-child{border-bottom:1px solid var(--color-neutral-3);border-bottom-left-radius:var(--border-radius-small)}.sms-tabs-header-nav-vertical.sms-tabs-header-nav-card-gutter .sms-tabs-header-title{margin-left:0;border-radius:var(--border-radius-small) 0 0 var(--border-radius-small);position:relative}.sms-tabs-header-nav-vertical.sms-tabs-header-nav-card-gutter .sms-tabs-header-title:not(:first-of-type){margin-top:4px}.sms-tabs-header-nav-vertical.sms-tabs-header-nav-card-gutter .sms-tabs-header-title-active,.sms-tabs-header-nav-vertical.sms-tabs-header-nav-card-gutter .sms-tabs-header-title-active:hover{border-right-color:var(--color-bg-2);border-bottom-color:var(--color-neutral-3)}.sms-tabs-content-vertical{width:auto;height:100%;padding:0}.sms-tabs-right .sms-tabs-content-vertical{padding-right:16px}.sms-tabs-left .sms-tabs-content-vertical{padding-left:16px}.sms-tabs-card-gutter>.sms-tabs-content-vertical,.sms-tabs-card>.sms-tabs-content-vertical{border:1px solid var(--color-neutral-3);border-left:none}body[arco-theme=dark] .sms-tabs-header-nav-capsule .sms-tabs-header-title-active{background-color:var(--color-fill-3)}body[arco-theme=dark] .sms-tabs-header-nav-capsule .sms-tabs-header-title:hover{background-color:var(--color-fill-3)}