@awsui/components-react/tabs/styles.scoped.css

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

._tabs-header_14rmt_1sm7z_5:not(#\9){
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  max-width:100%;
}

._tabs-tab_14rmt_1sm7z_13:not(#\9){
  list-style:none;
  padding:0;
  flex-shrink:0;
  display:block;
  max-width:calc(100% - 2rem);
  max-width:calc(100% - var(--space-l-3SmGmy, 2rem));
}

._tabs-tab-label_14rmt_1sm7z_21:not(#\9){
  display:inline-block;
  padding:0.4rem 2rem;
  padding:var(--space-scaled-2x-xxs-wz9S8K, 0.4rem) var(--space-l-3SmGmy, 2rem);
  min-width:0;
  -ms-word-break:break-all;
  word-break:break-word;
}

._tabs-tab_14rmt_1sm7z_13:not(#\9):not(:last-child) > a > ._tabs-tab-label_14rmt_1sm7z_21{
  margin-right:-1px;
  border-right:1px solid #aab7b8;
  border-right:1px solid var(--color-border-tabs-2xktd9, #aab7b8);
}

._tabs-tab-link_14rmt_1sm7z_34:not(#\9){
  position:relative;
  display:block;
  cursor:pointer;
  padding:1.2rem 0;
  padding:var(--space-scaled-s-1sAHT4, 1.2rem) 0;
  border:1px solid transparent;
  font-size:1.4rem;
  font-size:var(--size-font-body-100-1S0qZw, 1.4rem);
  line-height:2.2rem;
  line-height:var(--size-lineHeight-body-100-2aIKVt, 2.2rem);
  font-weight:700;
  color:#545b64;
  color:var(--color-text-interactive-default-3MrzkF, #545b64);
}
._tabs-tab-link_14rmt_1sm7z_34:not(#\9):hover{
  color:#0073bb;
  color:var(--color-text-accent-3H8Hch, #0073bb);
  text-decoration:none;
}
._tabs-tab-link_14rmt_1sm7z_34:not(#\9):focus{
  outline:none;
  text-decoration:none;
}
._tabs-tab-link_14rmt_1sm7z_34[data-awsui-focus-visible=true]:not(#\9):focus{
  z-index:1;
  outline:2px dotted transparent;
  border:1px solid #00a1c9;
  border:1px solid var(--color-border-item-focused-RH7L5U, #00a1c9);
  border-radius:2px;
  box-shadow:0 0 0 1px #00a1c9;
  box-shadow:0 0 0 1px var(--color-border-item-focused-RH7L5U, #00a1c9);
}
._tabs-tab-link_14rmt_1sm7z_34[data-awsui-focus-visible=true]:not(#\9):focus > a > ._tabs-tab-label_14rmt_1sm7z_21{
  border-right-color:transparent;
}

._tabs-tab_14rmt_1sm7z_13:not(#\9):first-child{
  margin-left:1px;
}

._tabs-tab_14rmt_1sm7z_13:not(#\9):last-child{
  margin-right:1px;
}

._tabs-tab-disabled_14rmt_1sm7z_72:not(#\9), ._tabs-tab-disabled_14rmt_1sm7z_72:not(#\9):hover{
  cursor:default;
  color:#aab7b8;
  color:var(--color-text-interactive-disabled-2xktd9, #aab7b8);
  font-weight:400;
}

._tabs-tab-link_14rmt_1sm7z_34:not(#\9):not(._tabs-tab-disabled_14rmt_1sm7z_72):before{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  bottom:-1px;
  height:0.2rem;
  background:#16191f;
  background:var(--color-text-interactive-hover-2ZjSsg, #16191f);
  opacity:0;
  transition:opacity var(--awsui-motion-duration-transition-quick) var(--awsui-motion-easing-transition-quick);
}
@media (prefers-reduced-motion: reduce){
  ._tabs-tab-link_14rmt_1sm7z_34:not(#\9):not(._tabs-tab-disabled_14rmt_1sm7z_72):before{
    animation:none;
    transition:none;
  }
}
.awsui-motion-disabled ._tabs-tab-link_14rmt_1sm7z_34:not(#\9):not(._tabs-tab-disabled_14rmt_1sm7z_72):before{
  animation:none;
  transition:none;
}

._tabs-tab-active_14rmt_1sm7z_100:not(#\9):not(._tabs-tab-disabled_14rmt_1sm7z_72){
  color:#0073bb;
  color:var(--color-text-accent-3H8Hch, #0073bb);
}
._tabs-tab-active_14rmt_1sm7z_100:not(#\9):not(._tabs-tab-disabled_14rmt_1sm7z_72):before{
  opacity:1;
}

._tabs-header--variant-default_14rmt_1sm7z_107:not(#\9){
  border-bottom:1px solid #aab7b8;
  border-bottom:1px solid var(--color-border-tabs-2xktd9, #aab7b8);
  border-top:1px solid transparent;
}

._tabs_14rmt_1sm7z_5:not(#\9){
  border-collapse:separate;
  border-spacing:0;
  caption-side:top;
  cursor:auto;
  direction:ltr;
  empty-cells:show;
  font-family:serif;
  font-size:medium;
  font-style:normal;
  font-variant:normal;
  font-weight:normal;
  font-stretch:normal;
  line-height:normal;
  hyphens:none;
  letter-spacing:normal;
  list-style:disc outside none;
  tab-size:8;
  text-align:left;
  text-align-last:auto;
  text-indent:0;
  text-shadow:none;
  text-transform:none;
  visibility:visible;
  white-space:normal;
  widows:2;
  word-spacing:normal;
  box-sizing:border-box;
  font-size:1.4rem;
  font-size:var(--size-font-body-100-1S0qZw, 1.4rem);
  line-height:2.2rem;
  line-height:var(--size-lineHeight-body-100-2aIKVt, 2.2rem);
  color:#16191f;
  color:var(--color-text-body-default-2ZjSsg, #16191f);
  font-weight:400;
  font-family:"Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
  display:block;
  width:100%;
}

._tabs-content-wrapper_14rmt_1sm7z_124:not(#\9){
  padding:1.6rem 0;
  padding:var(--space-scaled-m-p3tAne, 1.6rem) 0;
}

._tabs-content_14rmt_1sm7z_124:not(#\9){
  border:1px solid transparent;
}

._tabs-content-active_14rmt_1sm7z_132:not(#\9):focus{
  outline:none;
}
._tabs-content-active_14rmt_1sm7z_132[data-awsui-focus-visible=true]:not(#\9):focus{
  outline:2px dotted transparent;
  border:1px solid #00a1c9;
  border:1px solid var(--color-border-item-focused-RH7L5U, #00a1c9);
  border-radius:2px;
  box-shadow:0 0 0 1px #00a1c9;
  box-shadow:0 0 0 1px var(--color-border-item-focused-RH7L5U, #00a1c9);
}

._tabs-content-inactive_14rmt_1sm7z_142:not(#\9){
  display:none;
}