/**
 * Import Compass and Theme Variables
 */

@import "_variables";

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


/* Tab Variables
 ========================================================================== */
@l_Tab-Highlight: @g_Link-Base;

/* Region Display Selector
 ========================================================================== */
.t-Tabs--simple .t-Tabs-item.is-active .t-Tabs-link {
  box-shadow: 0 3px 0 @l_Tab-Highlight inset;
  background-color: #FFF;
  border-right: 1px solid #D6DFE6;
  border-left: 1px solid #D6DFE6;
  font-weight: bold;
}

.t-TabsRegion-mod--simple .t-Tabs--simple {
  box-shadow: 0 -1px 0 #D6DFE6 inset;
}

.t-TabsRegion-mod--simple > .t-TabsRegion-items > .a-Region-carouselItems {
  padding: 8px;
  background-color: #FFF;
  border: 1px solid #D6DFE6;
  border-top-width: 0;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
}

.t-TabsRegion-items > .a-Region-carouselControl {
  margin-bottom: 0 !important;
}

.t-TabsRegion-items .t-Region,
.t-TabsRegion-items .t-Wizard {
  margin-bottom: 0;
}

.t-Tabs--simple .t-Tabs-link:focus {}

.apex-rds .apex-rds-selected a span {
  box-shadow: 0 -3px 0 @l_Tab-Highlight inset;
}

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

body {
  .apex-rds-selected a {
    font-weight: bold;
    color: @l_Tab-Highlight;
  }

  .t-Tabs-link,
  .apex-rds a {
    font-size: 1.3rem;
  }

}

.t-Tabs--pill {
  background: linear-gradient(@g_Accent-OG, #F4F4F4);
  border-radius: 2px;

  .t-Icon {
    color: #333;
  }

  .t-Tabs-link {
    .text-dark();

    &:hover {
      background-color: #FFF;
    }

    &:focus {
      border-color: #4696FC;
    }

    &:active {
      background-color: #F0F0F0;
    }
  }

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

  .t-Tabs-item.is-active {
    .t-Tabs-link {
      background-color: #FFF;
    }
  }
}

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

.t-Tabs--simple .t-Tabs-link,
.apex-rds a {
  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-title & {
    color: @g_Body-Title-FG;
  }
}


.apex-rds-hover.left {
  a {
    background: linear-gradient(to right, @g_Body-Title-BG 50%, rgba(255, 255, 255, 0) 100%);
  }
}

.apex-rds-hover.right {
  a {
    background: linear-gradient(to right, @g_Body-Title-BG 0%, rgba(255, 255, 255, 0.0) 1%, @g_Body-Title-BG 50%);
  }
}



.t-Tabs--large {
  .t-Tabs-link {
    font-size: 1.3rem;
  }
}