////////////////////////////
// THEME / COMPONENTS / TABS
////////////////////////////


@import '../../scss/pre.tmp.scss';


.unl .dcf-tab {
  @include font-sans;
  margin-bottom: -#{$border-width-tab};
}


.unl .dcf-tab[aria-selected] {
  border-bottom-color: $bg-color-tab-selected-light-mode;
  border-left-color: $border-color-tab-light-mode;
  border-right-color: $border-color-tab-light-mode;
  border-top-color: $border-color-tab-light-mode;
  border-style: $border-style-tab;
  border-width: $border-width-tab;
}


.unl .dcf-tabs-panel > *:last-child {
  margin-bottom: 0;
}


// Responsive tabs
@include mq(md, max, width) {

  .unl .dcf-tabs-responsive .dcf-tab {
    border-bottom-width: 0;
    border-left: $border-width-tab $border-style-tab $color-tab-selected-light-mode;
    border-right: $border-width-tab $border-style-tab $border-color-tab-light-mode;
    border-top: $border-width-tab $border-style-tab $border-color-tab-light-mode;
    margin-bottom: 0;
  }


  .unl .dcf-tabs-responsive .dcf-tab[aria-selected] {
    position: relative;
  }


  .unl .dcf-tabs-responsive .dcf-tab[aria-selected]::before {
    border-bottom: .47em solid transparent;
    border-left: .47em solid $gray;
    border-top: .47em solid transparent;
    content: '';
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

}