// Settings
@import "px-defaults-design/_settings.defaults.scss";
// Generic
//@import "px-normalize-design/_generic.normalize.scss";
//@import "px-box-sizing-design/_generic.box-sizing.scss";
//@import "px-helpers-design/_generic.helpers.scss";
// Base
@import "px-flexbox-design/_base.flexbox.scss";
//@import "px-viewport-design/_base.viewport.scss";
// Component
.px-tab {

  // Trumps
  @import "px-spacing-responsive-design/_trumps.spacing-responsive.scss";
  @import "px-widths-responsive-design/_trumps.widths-responsive.scss";

  @extend %flex;
  background-color: transparent;

  &.iron-selected > .tab-title {
    color: var(--px-tab-color--selected, black);
    border-bottom: 2px solid var(--px-tab-color--selected, black);
    font-weight: bold;
  }
  .tab-title {
    line-height: 1.3;
    font: inherit;
    text-align: center;
    vertical-align: middle;
    padding-bottom: 10px;
    margin: 1px 20px 0 0;
    color: var(--px-tab-color, black);
    cursor: pointer;
    text-decoration: none;
    user-select: none;

    &:hover {
      color: var(--px-tab-color--hover, black);
    }

    &:active {
      color: var(--px-tab-color--active, black);
    }
  }
}