$tab-link-bg: null !default;
$tab-link-color: $text-dark !default;
$tab-link-border-width: 1px !default;
$tab-nav-font-size: null !default;

// @import "@css[shared]/components/tabs/_tabs-nav";
// není potřeba extendovat, klidně si celé css zkopíruj na shop

.tabs {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: $spacer-lg;

   .nav-link {
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1;

      @if mixin-exists(tab-link) {
         @include tab-link;
      } @else {
         background: $tab-link-bg;
         border: $tab-link-border-width solid transparent;
         border-bottom-color: $border-color;
         color: $tab-link-color;
         font-size: $tab-nav-font-size;
         font-weight: $font-weight-bold;
         padding: 20px 60px;
         text-align: center;
         text-decoration: none;
         transition: background-color .3s;

         &:hover,
         &:focus,
         &.active {
            border-color: $border-color;
            border-bottom-color: transparent;
         }
      }
   }

   @media screen and (min-width: $md) {
      .nav-link {
         order: -1;
      }
   }

   @media screen and (max-width: $md - 1) {
      .nav-link {
         width: 100%;
         padding: 15px 10px;

         &::after {
            @include fonticon;

            content: $icons_caret-down;
            font-size: 12px;
            right: 15px;
            position: absolute;
         }
      }
   }
}
