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

@mixin el-route-tabset-theme() {

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

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

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

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

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

    .route-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);
        }
      }
    }

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

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

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

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

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