// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

@include exports('tabs.clarity') {
  @media screen {
    section[aria-hidden='true'] {
      display: none;
    }
  }

  [data-hidden='true'] {
    display: none;
  }
}

button.nav-link {
  border-radius: 0;
  text-transform: capitalize;
  min-width: 0;
}

.tabs-overflow {
  position: relative;

  .nav-item {
    margin-right: 0;
  }
}

.tab-content {
  display: inline;
}

@include fixForIE11AndUp {
  .tab-content {
    display: inline-block;
  }
}

.tabs-vertical {
  display: flex;

  // Must be direct child, so horizontal tabs can be nested in vertical tabs
  & > .nav {
    height: auto;
    box-shadow: none;
    flex-direction: column;
    align-items: stretch;
    margin-right: 1rem;
    overflow: auto;
    flex-shrink: 0;
    padding: 4px;
    width: 10rem;
    min-width: 2rem;

    .nav-link {
      text-align: left;
      padding: 0 0.5rem;
      border: none;
      margin-bottom: 1px;
      flex-shrink: 0;
      margin-top: 0;
      margin-left: 0;
      width: 100%;

      &.nav-item {
        margin-right: 0;
      }

      &.active,
      &:hover {
        box-shadow: inset 3px 0 0 $clr-nav-active-box-shadow-color;
      }
      &.active {
        background-color: $clr-global-selection-color;
      }
      &:not(.active):hover {
        background-color: $clr-sidenav-link-hover-color;
      }
    }
  }
}

// Firefox A11Y can't see tabs with visibility: hidden;
.tabs-overflow [role='tab'] {
  visibility: visible;
}