/*
 * Responsive vertical tabs for Bootstrap 4
 *
 * Main stylesheet. @import "custom-variables.sccss" before
 * this file to compile into final CSS
 *
 * Copyright (c) 2020 Tromgy (tromgy@yahoo.com)
 *
 * This software is supplied under the terms of the MIT License, a
 * copy of which should be located in the distribution where this
 * file was obtained (LICENSE.txt). A copy of the license may also be
 * found online at https://opensource.org/licenses/MIT.
 *
 */

@import "bootstrap/scss/_functions";
@import "bootstrap/scss/_variables";

// Magic numbers
$magic-horizontal-value: 3.2rem;
$magic-vertical-value: 5rem;
$sideways-tabs-height: 1rem;

// Placeholders
%sideways-tabs {
  margin-top: $magic-vertical-value;
  border: none;
  position: relative;
  margin-bottom: 0;
}

// Used in vertical tab configuration (wide view)
%flex-tabs {
  height: 100%;
  flex-direction: column;
}

// Mixins (can be reused inside @media scope)
@mixin fixed-tab($size: $fixed-tab-size) {
  width: $size;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// Used in horizontal tab configuration (narrow views)
@mixin flex-tabs-h {
  flex-direction: row;
  border-right: none;
  border-left: none;
  min-width: 100%;
}

// Left vertical tabs
.left-tabs.nav-tabs {
  @extend %flex-tabs;
  border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
  border-bottom: none;
}

.left-tabs .nav-link {
  border-top-left-radius: $nav-tabs-border-radius;
  border-bottom-left-radius: $nav-tabs-border-radius;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  margin-right: -$nav-tabs-border-width;
  text-align: $left-tabs-text-align;
}

.left-tabs .nav-link:hover {
  border-right: $nav-tabs-border-width solid transparent;
}

.left-tabs .nav-link.active {
  border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
  border-right: $nav-tabs-border-width solid transparent;
  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
  border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
}

// Right vertical tabs
.right-tabs.nav-tabs {
  @extend %flex-tabs;
  border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
  border-bottom: none;
}

.right-tabs .nav-link {
  border-top-right-radius: $nav-tabs-border-radius;
  border-bottom-right-radius: $nav-tabs-border-radius;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  margin-left: -$nav-tabs-border-width;
  text-align: $right-tabs-text-align;
}

.right-tabs .nav-link:hover {
  border-left: $nav-tabs-border-width solid transparent;
}

.right-tabs .nav-link.active {
  border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
  border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
  border-left: $nav-tabs-border-width solid transparent;
}

// Sideways left vertical tabs
.left-tabs.sideways-tabs {
  @extend %sideways-tabs;
  @extend %flex-tabs;
  border-right: none;
  left: -$magic-horizontal-value;
}

.sideways-tabs.left-tabs .nav-item {
  transform: rotate(-90deg); // ccw
  height: $sideways-tabs-height;
  margin-bottom: calc(#{$fixed-tab-size} - #{$sideways-tabs-height});
}

// NOTE: all top-bottom-left-right are before the rotation transform
.sideways-tabs.left-tabs .nav-link {
  @include fixed-tab;
  border-top-right-radius: $nav-tabs-border-radius;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: $nav-tabs-border-radius;
  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
}

.sideways-tabs.left-tabs .nav-link:hover {
  border-right: $nav-tabs-border-width solid $gray-200;
}

.sideways-tabs.left-tabs .nav-link.active {
  border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
  border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
  border-bottom: $nav-tabs-border-width solid transparent;
  border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
}

// Sideways right vertical tabs
.right-tabs.sideways-tabs {
  @extend %sideways-tabs;
  @extend %flex-tabs;
  border-left: none;
  right: $magic-horizontal-value;
}

.sideways-tabs.right-tabs .nav-item {
  transform: rotate(90deg); // cw
  height: $sideways-tabs-height;
  margin-bottom: calc(#{$fixed-tab-size} - #{$sideways-tabs-height});
}

// NOTE: all top-bottom-left-right are before the rotation transform
.sideways-tabs.right-tabs .nav-link {
  @include fixed-tab;
  border-top-right-radius: $nav-tabs-border-radius;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: $nav-tabs-border-radius;
  border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
}

.sideways-tabs.right-tabs .nav-link:hover {
  border-left: $nav-tabs-border-width solid $gray-200;
}

.sideways-tabs.right-tabs .nav-link.active {
  border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
  border-right: $nav-tabs-border-width solid $nav-tabs-border-color;
  border-bottom: $nav-tabs-border-width solid transparent;
  border-left: $nav-tabs-border-width solid $nav-tabs-border-color;
}

// Use horizontal tabs when the view is too narrow for the vertical tabs on the side
@media (min-width: $horizontal-tabs-min) and (max-width: $vertical-tabs-min) {
  .left-tabs.nav-tabs {
    @include flex-tabs-h;
    border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
    left: auto;
    margin-top: auto;
  }

  .left-tabs .nav-link {
    @include fixed-tab;
    border-top-right-radius: $nav-tabs-border-radius;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: $nav-tabs-border-radius;
    margin-right: 0;
    margin-bottom: -$nav-tabs-border-width;
  }

  .left-tabs .nav-link.nav-link:hover {
    border-right-color: $nav-tabs-border-color;
    border-bottom-color: transparent;
  }

  .left-tabs .nav-link.active {
    border-top-color: $nav-tabs-border-color;
    border-right-color: $nav-tabs-border-color;
    border-bottom-color: transparent;
    border-left-color: $nav-tabs-border-color;
  }

  .sideways-tabs.left-tabs .nav-item,
  .sideways-tabs.right-tabs .nav-item {
    transform: none;
    height: auto;
    width: auto;
    margin-bottom: 0;
  }

  // Right tabs wrap into the bottom (upside-down) tabs
  .right-tabs.nav-tabs {
    @include flex-tabs-h;
    border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
    right: auto;
    margin-top: auto;
  }

  .sideways-tabs.right-tabs .nav-link,
  .right-tabs .nav-link {
    @include fixed-tab;
    border-top-right-radius: 0;
    border-bottom-right-radius: $nav-tabs-border-radius;
    border-bottom-left-radius: $nav-tabs-border-radius;
    border-top-left-radius: 0;
    margin-left: 0;
    margin-top: -$nav-tabs-border-width;
    border-bottom-color: transparent;
  }

  .right-tabs .nav-link:hover {
    border-top-color: transparent;
    border-left-color: $nav-tabs-border-color;
    border-bottom-color: $gray-200;
  }

  .sideways-tabs.right-tabs .nav-link.active,
  .right-tabs .nav-link.active {
    border-top-color: transparent;
    border-right-color: $nav-tabs-border-color;
    border-bottom-color: $nav-tabs-border-color;
    border-left-color: $nav-tabs-border-color;
  }
}

// Turn tabs into nav-pill-like buttons when the view is very narrow
@media (max-width: $horizontal-tabs-min) {
  .left-tabs.nav-tabs {
    @include flex-tabs-h;
    border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
    left: auto;
    margin-top: auto;
    padding-bottom: $nav-tabs-border-radius;
  }

  .right-tabs.nav-tabs {
    @include flex-tabs-h;
    border-top: $nav-tabs-border-width solid $nav-tabs-border-color;
    right: auto;
    margin-top: auto;
    padding-top: $nav-tabs-border-radius;
  }

  .sideways-tabs.left-tabs .nav-item,
  .sideways-tabs.right-tabs .nav-item {
    transform: none;
    height: auto;
    width: auto;
    margin-bottom: 0;
  }

  .sideways-tabs.left-tabs .nav-link,
  .sideways-tabs.right-tabs .nav-link,
  .nav-tabs .nav-link {
    @include fixed-tab;
    border-radius: $nav-tabs-border-radius;
    margin: $nav-tabs-border-radius;
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }

  .sideways-tabs.nav-tabs .nav-link:hover,
  .nav-tabs .nav-link:hover {
    border: $nav-tabs-border-width solid $gray-200;
    border-top-color: $gray-200;
    border-right-color: $gray-200;
    border-bottom-color: $gray-200;
    border-left-color: $gray-200;
  }

  .sideways-tabs.nav-tabs .nav-link.active,
  .left-tabs .nav-link.active,
  .right-tabs .nav-link.active {
    border-top-color: $nav-tabs-border-color;
    border-right-color: $nav-tabs-border-color;
    border-bottom-color: $nav-tabs-border-color;
    border-left-color: $nav-tabs-border-color;
  }
}