@import "../_variables";

/* Tab Variables
 ========================================================================== */
@Tab-Highlight: @g_green-100;

/* Region Display Selector
  ========================================================================== */
.t-Tabs--simple .t-Tabs-item.is-active .t-Tabs-link {
  box-shadow: 0 -3px 0 @Tab-Highlight inset;
}

.t-Tabs--simple .t-Tabs-link:focus {
  box-shadow: 0 0 0 1px @Tab-Highlight inset;
}

.t-Tabs--pill {
  background-color: darken(@g_Region-BG, 2.5%);
  border-radius: 2px;
  border-color: @_base-alpha-4;
  box-shadow: 0 1px 2px @_base-shadow-2;

  .t-Icon {
    color: @g_Region-FG;
  }

  .t-Tabs-link {
    color: @g_Region-FG;
    border-left-color: @_base-alpha-4;

    &:hover {
      background-color: @g_Region-BG;
    }

    &:focus {
      box-shadow: 0 0 0 1px @Tab-Highlight inset;
    }

    &:active {
      background-color: @g_Region-BG;
      box-shadow: 0 2px 1px @_base-shadow-2 inset;
    }
  }

  .t-Tabs-item:first-child .t-Tabs-link {
    border-radius: 2px 0 0 2px;
  }

  .t-Tabs-item:last-child .t-Tabs-link {
    border-right-color: @_base-alpha-4;
  }

  .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: @_base-alpha-1;
  }

  &:active {
    background-color: @_base-alpha-5;
  }

  .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 -3px 0 @Tab-Highlight inset;
}

.apex-rds a:focus {
  box-shadow: 0 0 0 1px @Tab-Highlight inset;
}

.apex-rds a {
  color: fade(@g_neutral-190, 60%);

  .t-Body-title &,
  .t-Body-info & {
    color: fade(@g_neutral-190, 60%);
  }

  .t-Region & {
    color: fade(@g_neutral-190, 60%);
  }


  &:hover {
    color: fade(@g_neutral-190, 80%);
  }
}

.apex-rds .apex-rds-selected a {
  color: @g_neutral-190;
}

.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 */
  }
}

.apex-rds-item--hint a span {
  box-shadow: 0 -3px 0 @g_neutral-80 inset;
}

/* Vertical RDS
    ========================================================================== */
.vertical-rds,
.t-Body-side {
  .apex-rds .apex-rds-selected span {
    box-shadow: 4px 0 0 @Tab-Highlight inset;

    .u-RTL & {
      box-shadow: -4px 0 0 @Tab-Highlight inset;
    }
  }
}