/**
 * Import Compass and Theme Variables
 */

@import "_variables";

/* ==========================================================================
  Tabs Configuration
  ========================================================================== */


/* Tab Variables
 ========================================================================== */
@l_Tab-Highlight: @g_Accent-BG;

/* Region Display Selector
 ========================================================================== */
.t-Tabs--simple .t-Tabs-item.is-active .t-Tabs-link {
  box-shadow: 0 -2px 0 @g_Focus inset;
}
.t-Tabs--simple .t-Tabs-link:focus {
  box-shadow: 0 0 0 1px @g_Focus inset;
}

.t-Tabs--pill {
  background-color: darken(@g_Region-BG,2.5%);
  border-radius: 2px;
  .t-Icon {
    color: @g_Region-FG;
  }
  .t-Tabs-link {
    color: @g_Region-FG;;
    &:hover {
      background-color: @g_Region-BG;
    }
    &:focus {
      box-shadow: 0 0 0 1px @g_Focus inset;
    }
    &:active {
      background-color: @g_Region-BG;
    }
  }
  .t-Tabs-item:first-child .t-Tabs-link {
    border-radius: 2px 0 0 2px;
  }
  .t-Tabs-item.is-active {
    .t-Tabs-link {
      background-color: @g_Region-BG;
    }
  }
}

.t-Tabs--simple .t-Icon {
  color: @g_Region-FG;
}
.t-Tabs--simple .t-Tabs-link {
  color: fade(contrast(@g_Body-Title-BG, desaturate(darken(@g_Body-Title-BG,  75%), 100%), desaturate(lighten(@g_Body-Title-BG,  75%), 50%)), 100%);
  &:hover {
    background-color: rgba(0,0,0,.025);
  }
  &:active {
    background-color: rgba(0,0,0,.15);
  }
  .t-Body & {
    color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG,  75%), 100%), desaturate(lighten(@g_Body-BG,  75%), 50%)), 100%);
  }
  .t-Body-title & {
    color: @g_Body-Title-FG;
  }
  .t-Region & {
    color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG,  75%), 100%), desaturate(lighten(@g_Region-BG,  75%), 50%)), 100%);
  }
}

/* ==========================================================================
   Region Display Selector
   ========================================================================== */
.apex-rds .apex-rds-selected span {
  box-shadow: 0 -2px 0 @g_Focus inset;
}
.apex-rds a:focus {
  box-shadow: 0 0 0 1px @g_Focus inset;
}

.apex-rds a {
  .t-Body-title & {
    color: @g_Body-Title-FG;
  }
  .t-Region & {
    color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG,  75%), 100%), desaturate(lighten(@g_Region-BG,  75%), 50%)), 100%);
  }
  color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG,  75%), 100%), desaturate(lighten(@g_Body-BG,  75%), 50%)), 100%);
  &:hover {
    color: @g_Link-Base;
  }
}

.apex-rds .apex-rds-selected a {
  color: @g_Link-Base;
}

.apex-rds-hover.left {
  a {
    background: -webkit-linear-gradient(left,  @g_Body-Title-BG 50%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(to right,  @g_Body-Title-BG 50%,rgba(255,255,255,0) 100%); /* W3C */
  }
}

.apex-rds-hover.right {
  a {
    background: -webkit-linear-gradient(left,   @g_Body-Title-BG 0%,rgba(255,255,255,0.0) 1%, @g_Body-Title-BG 50%); /* Chrome10+,Safari5.1+ */
    background: linear-gradient(to right,   @g_Body-Title-BG 0%,rgba(255,255,255,0.0) 1%, @g_Body-Title-BG 50%); /* W3C */
  }
}

/* Vertical RDS
   ========================================================================== */
.vertical-rds,
.t-Body-side {
  .apex-rds .apex-rds-selected span {
    box-shadow: 4px 0 0 @g_Focus inset;
    .u-RTL & {
      box-shadow: -4px 0 0 @g_Focus inset;
    }
  }
}