/**
 * @license
 * Copyright Endlessjs. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */

@mixin el-tabset-theme() {

  el-tabset {
    background-color: el-theme(tabset-background-color);
    border-radius: el-theme(tabset-border-radius);
    box-shadow: el-theme(tabset-shadow);

    .tabset {
      border-bottom: el-theme(tabset-divider-width) el-theme(tabset-divider-style) el-theme(tabset-divider-color);
    }

    .tab-link {
      background-color: el-theme(tabset-tab-background-color);
      cursor: pointer;
      padding: el-theme(tabset-tab-padding);
      color: el-theme(tabset-tab-text-color);
      font-family: el-theme(tabset-tab-text-font-family);
      font-size: el-theme(tabset-tab-text-font-size);
      font-weight: el-theme(tabset-tab-text-font-weight);
      line-height: el-theme(tabset-tab-text-line-height);
      text-transform: el-theme(tabset-tab-text-transform);

      &::before {
        background-color: el-theme(tabset-tab-underline-color);
        height: el-theme(tabset-tab-underline-width);
      }
    }

    .tab.active {
      .tab-link {
        background-color: el-theme(tabset-tab-active-background-color);
        color: el-theme(tabset-tab-active-text-color);
        &::before {
          background-color: el-theme(tabset-tab-active-underline-color);
        }
      }
    }

    .tab:focus {
      .tab-link {
        background-color: el-theme(tabset-tab-focus-background-color);
        color: el-theme(tabset-tab-focus-text-color);
        &::before {
          background-color: el-theme(tabset-tab-focus-underline-color);
        }
      }
    }

    .tab:hover {
      .tab-link {
        color: el-theme(tabset-tab-hover-text-color);
        background-color: el-theme(tabset-tab-hover-background-color);
        &::before {
          background-color: el-theme(tabset-tab-hover-underline-color);
        }
      }
    }

    .tab.disabled {
      cursor: default;
      pointer-events: none;

      .tab-link {
        background-color: el-theme(tabset-tab-disabled-background-color);
        color: el-theme(tabset-tab-disabled-text-color);
        cursor: default;
        pointer-events: none;
        &::before {
          background-color: el-theme(tabset-tab-disabled-underline-color);
        }
      }
    }

    .tab.responsive {
      @media screen and (max-width: el-theme(tabset-tab-text-hide-breakpoint)) {
        .tab-text {
          display: none;
        }
      }
    }

    el-tab {
      background-color: el-theme(tabset-content-background-color);
      color: el-theme(tabset-content-text-color);
      font-family: el-theme(tabset-content-text-font-family);
      font-size: el-theme(tabset-content-text-font-size);
      font-weight: el-theme(tabset-content-text-font-weight);
      line-height: el-theme(tabset-content-text-line-height);
      padding: el-theme(tabset-content-padding);

      @include el-scrollbars(
          el-theme(tabset-scrollbar-color),
          el-theme(tabset-scrollbar-background-color),
          el-theme(tabset-scrollbar-width));
    }
  }
}