/**
 * 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,  85%), 100%), desaturate(lighten(@g_Body-Title-BG,  85%), 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,  85%), 100%), desaturate(lighten(@g_Body-BG,  85%), 50%)), 100%);
  }

  .t-Body-title & {
    color: @g_Body-Title-FG;
  }

  .t-Region & {
    color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG,  85%), 100%), desaturate(lighten(@g_Region-BG,  85%), 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 &,
  .t-Body-info & {
    color: @g_Body-Title-FG;
  }

  .t-Region & {
    color: fade(contrast(@g_Region-BG, desaturate(darken(@g_Region-BG,  85%), 100%), desaturate(lighten(@g_Region-BG,  85%), 50%)), 100%);
  }

  color: fade(contrast(@g_Body-BG, desaturate(darken(@g_Body-BG,  85%), 100%), desaturate(lighten(@g_Body-BG,  85%), 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;
    }
  }
}