@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$tabs-font-size: 1.6rem !default;

$tabs-primary-bg-color: #F3F8FF !default;
$tabs-primary-padding: 20px 0px 0px 30px !default;
$tabs-primary-tab-item-height: 40px !default;
$tabs-primary-tab-item-padding: 0px 20px !default;
$tabs-primary-tab-item-corner-radius: $border-radius-md !default;
$tabs-primary-tab-item-text-color: map-get($denali-brand-colors,"300") !default;
$tabs-primary-tab-item-active-bg-color: map-get($denali-grey-colors,"100") !default;
$tabs-primary-tab-item-active-text-color: map-get($denali-grey-colors,"800") !default;
$tabs-primary-tab-item-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), 0.2) !default;

$tabs-primary-vertical-width: 300px !default;
$tabs-primary-vertical-padding: 12px 0px 40px 0px !default;
$tabs-primary-vertical-tab-item-height: 40px !default;
$tabs-primary-vertical-tab-item-margin: 2px 16px !default;
$tabs-primary-vertical-tab-item-padding: 0px 14px !default;
$tabs-primary-vertical-tab-item-corner-radius: $border-radius-lg !default;
$tabs-primary-vertical-tab-item-bg-color: null !default;
$tabs-primary-vertical-tab-item-text-color: inherit !default;
$tabs-primary-vertical-tab-item-border: null !default;
$tabs-primary-vertical-tab-item-active-border: inset 0px 0px 0px 1px rgba(map-get($denali-brand-colors,"300"), .1) !default;
$tabs-primary-vertical-tab-item-active-bg-color: rgba(map-get($denali-brand-colors,"300"), 0.1) !default;
$tabs-primary-vertical-tab-item-active-text-color: map-get($denali-grey-colors,"800") !default;
$tabs-primary-vertical-tab-item-active-text-weight: bold !default;
$tabs-primary-vertical-tab-item-hover-border: inset 0px 0px 0px 1px rgba(map-get($denali-brand-colors,"400"), .1) !default;
$tabs-primary-vertical-tab-item-hover-bg-color: null !default;
$tabs-primary-vertical-tab-item-hover-text-color: map-get($denali-brand-colors,"400") !default;
$tabs-primary-vertical-tab-item-hover-text-weight: null !default;
$tabs-primary-vertical-tab-item-disabled-border: none !default;
$tabs-primary-vertical-tab-item-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), 0.2) !default;

$tabs-secondary-border: inset 0px -2px rgba(map-get($denali-grey-colors,"700"), .05) !default;
$tabs-secondary-tab-item-height: 40px !default;
$tabs-secondary-tab-item-padding: 0px 20px !default;
$tabs-secondary-tab-item-text-color: map-get($denali-brand-colors,"300") !default;
$tabs-secondary-tab-item-active-text-color: map-get($denali-grey-colors,"800") !default;
$tabs-secondary-tab-item-active-border: inset 0px -2px map-get($denali-brand-colors,"300") !default;

$tabs-section-header-text-color: #9a9a9a !default;
$tabs-section-header-text-size: 1.2rem !default;
$tabs-section-header-text-transform: uppercase !default;

@mixin tabs-default {
  .tabs {
    -webkit-overflow-scrolling: touch;

    // Primary
    &.is-primary {
      min-width: 100%;
      background: $tabs-primary-bg-color;
      ul {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        padding: $tabs-primary-padding;
        overflow-x: auto;
        overflow-x: -moz-scrollbars-none;
        &::-webkit-scrollbar {
          width: 0 !important
        }
        li {
          white-space: nowrap;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          color: $tabs-primary-tab-item-text-color;
          font-size: $tabs-font-size;
          height: $tabs-primary-tab-item-height;
          border-top-left-radius: $tabs-primary-tab-item-corner-radius;
          border-top-right-radius: $tabs-primary-tab-item-corner-radius;
          > * {
            padding: $tabs-primary-tab-item-padding;
          }
          &.is-active {
            background: $tabs-primary-tab-item-active-bg-color;
            > * {
              color: $tabs-primary-tab-item-active-text-color;
            }
          }
          &.is-disabled > * {
            color: $tabs-primary-tab-item-disabled-text-color;
            cursor: not-allowed;
          }
        }
      }

      // Vertical Primary
      &.is-vertical {
        min-width: $tabs-primary-vertical-width;
        width: $tabs-primary-vertical-width;
        height: inherit;
        overflow-y: auto;
        ul {
          flex-direction: column;
          padding: $tabs-primary-vertical-padding;
          li {
            cursor: pointer;
            justify-content: flex-start;
            box-sizing: border-box;
            height: $tabs-primary-vertical-tab-item-height;
            margin: $tabs-primary-vertical-tab-item-margin;
            border-radius: $tabs-primary-vertical-tab-item-corner-radius;
            background: $tabs-primary-vertical-tab-item-bg-color;
            box-shadow: $tabs-primary-vertical-tab-item-border;
            > * {
              color: $tabs-primary-vertical-tab-item-text-color;
              padding: $tabs-primary-vertical-tab-item-padding;
              height: inherit;
              flex: auto;
              display: flex;
              align-items: center;
            }
            &:hover {
              box-shadow: $tabs-primary-vertical-tab-item-hover-border;
              background: $tabs-primary-vertical-tab-item-hover-bg-color;
              font-weight: $tabs-primary-vertical-tab-item-hover-text-weight;
              > * {
                color: $tabs-primary-vertical-tab-item-hover-text-color;
              }
            }
            &.is-active {
              box-shadow: $tabs-primary-vertical-tab-item-active-border;
              background: $tabs-primary-vertical-tab-item-active-bg-color;
              font-weight: $tabs-primary-vertical-tab-item-active-text-weight;
              > * {
                color: $tabs-primary-vertical-tab-item-active-text-color;
              }
            }
            &.is-disabled {
              box-shadow: $tabs-primary-vertical-tab-item-disabled-border;
              > * {
                color: $tabs-primary-vertical-tab-item-disabled-text-color;
              }
            }
            // Section Header
            &.tabs__section-header {
              font-size: $tabs-section-header-text-size;
              text-transform: $tabs-section-header-text-transform;
              color: $tabs-section-header-text-color;
              padding: $tabs-primary-vertical-tab-item-padding;
        
              &:hover {
                box-shadow: none;
              }
            }
          }
        }
      }
    }

    // Secondary
    &.is-secondary {
      min-width: 100%;
      ul {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        padding: 0px;
        box-shadow: $tabs-secondary-border;
        overflow-x: auto;
        overflow-x: -moz-scrollbars-none;
        &::-webkit-scrollbar {
          width: 0 !important
        }
        li {
          cursor: pointer;
          white-space: nowrap;
           >* {
            display: flex;
            justify-content: center;
            align-items: center;
            color: $tabs-secondary-tab-item-text-color;
            font-size: $tabs-font-size;
            height: $tabs-secondary-tab-item-height;
            padding: $tabs-secondary-tab-item-padding;
          }
          &.is-active>* {
            box-shadow: $tabs-secondary-tab-item-active-border;
            color: $tabs-secondary-tab-item-active-text-color;
          }
        }
      }
    }

    // Helpers
    &.tablet-down-hide-left {
      @include media-size-down(tablet) {
        position: absolute;
        left: -300px;
        transition: left 300ms;
      }
    }
    &.tablet-down-hide-right {
      @include media-size-down(tablet) {
        position: absolute;
        right: -300px;
        transition: right 300ms;
      }
    }
    &.tablet-down-toggle-tabs-left {
      @include media-size-down(tablet) {
        position: absolute;
        left: 0px;
        margin: 0px;
        box-shadow: 4px 0px 8px rgba(0, 0, 0, 0.16);
        z-index: 99;
      }
    }
  }
}

@mixin tabs-theme {
  .tabs {
    &.is-primary {
      background: $tabs-primary-bg-color;
      ul {
        padding: $tabs-primary-padding;
        li {
          color: $tabs-primary-tab-item-text-color;
          font-size: $tabs-font-size;
          height: $tabs-primary-tab-item-height;
          border-top-left-radius: $tabs-primary-tab-item-corner-radius;
          border-top-right-radius: $tabs-primary-tab-item-corner-radius;
          > * {
            padding: $tabs-primary-tab-item-padding;
          }
          &.is-active {
            background: $tabs-primary-tab-item-active-bg-color;
            > * {
              color: $tabs-primary-tab-item-active-text-color;
            }
          }
          &.is-disabled > * {
            color: $tabs-primary-tab-item-disabled-text-color;
          }
        }
      }

      // Vertical Primary
      &.is-vertical {
        min-width: $tabs-primary-vertical-width;
        width: $tabs-primary-vertical-width;
        ul {
          padding: $tabs-primary-vertical-padding;
          li {
            height: $tabs-primary-vertical-tab-item-height;
            margin: $tabs-primary-vertical-tab-item-margin;
            border-radius: $tabs-primary-vertical-tab-item-corner-radius;
            background: $tabs-primary-vertical-tab-item-bg-color;
            box-shadow: $tabs-primary-vertical-tab-item-border;
            > * {
              color: $tabs-primary-vertical-tab-item-text-color;
              padding: $tabs-primary-vertical-tab-item-padding;
            }
            &:hover {
              box-shadow: $tabs-primary-vertical-tab-item-hover-border;
              background: $tabs-primary-vertical-tab-item-hover-bg-color;
              font-weight: $tabs-primary-vertical-tab-item-hover-text-weight;
              > * {
                color: $tabs-primary-vertical-tab-item-hover-text-color;
              }
            }
            &.is-active {
              box-shadow: $tabs-primary-vertical-tab-item-active-border;
              background: $tabs-primary-vertical-tab-item-active-bg-color;
              font-weight: $tabs-primary-vertical-tab-item-active-text-weight;
              > * {
                color: $tabs-primary-vertical-tab-item-active-text-color;
              }
            }
            &.is-disabled {
              box-shadow: $tabs-primary-vertical-tab-item-disabled-border;
              > * {
                color: $tabs-primary-vertical-tab-item-disabled-text-color;
              }
            }
            &.tabs__section-header {
              font-size: $tabs-section-header-text-size;
              text-transform: $tabs-section-header-text-transform;
              color: $tabs-section-header-text-color;
              padding: $tabs-primary-vertical-tab-item-padding;
        
              &:hover {
                box-shadow: none !important;
              }
            }
          }
        }
      }
    }
    &.is-secondary {
      ul {
        box-shadow: $tabs-secondary-border;
        li {
           >* {
            color: $tabs-secondary-tab-item-text-color;
            font-size: $tabs-font-size;
            height: $tabs-secondary-tab-item-height;
            padding: $tabs-secondary-tab-item-padding;
          }
          &.is-active>* {
            box-shadow: $tabs-secondary-tab-item-active-border;
            color: $tabs-secondary-tab-item-active-text-color;
          }
        }
      }
    }
  }
}