/**
* Import Compass and Theme Variables
*/

@import "_variables";


:root {
  --a-base-link-text-color: @g_Link-Base;
}

/*
{
  "var" : "@l_Left-Col-BG",
  "name" : "UTR.LESS.BACKGROUND",
  "type" : "color",
  "group": "UTR.LESS.CONTAINERS",
  "subgroup": "UTR.LESS.LEFT_COLUMN"
}
*/
@l_Left-Col-BG: lighten(@g_Accent-OG, 5%);

/*
{
  "var" : "@l_Left-Col-Text",
  "name" : "UTR.LESS.TEXT",
  "type" : "color",
  "group": "UTR.LESS.CONTAINERS",
  "subgroup": "UTR.LESS.LEFT_COLUMN"
}
*/
@l_Left-Col-Text: @g_Body-Text;


/* ==========================================================================
   Body
   ========================================================================== */
body {
  background-color: @g_Body-BG;
  color: @g_Body-Text;

  .grid-debug-on {
    .container {
      border-bottom-color: @_base-alpha-4;
    }
  }
}

a {
  color: @g_Link-Base;
}

.t-Body-actions {
  background-color: @g_Actions-Col-BG;
  border-left: 1px solid @_base-alpha-3;

  .u-RTL & {
    border-left: 0;
    border-right: 1px solid @_base-alpha-3;
  }
}

.t-Body-title {
  background-color: fadeout(@g_Body-Title-BG, 10%);
  color: @g_Body-Title-FG;
  border-bottom: 1px solid contrast(@g_Body-Title-BG, darken(@g_Body-Title-BG,  10%), lighten(@g_Body-Title-BG,  10%),  0);
  border-bottom-color: @_base-alpha-4;
  //backdrop-filter: saturate(180%) blur(8px);
}

// For Marquee Detail Page, we can set the offset background to make the middle area
// appear as a single continuous block
.t-PageBody--masterDetail {
  #t_Body_content_offset {
    background-color: fadeout(@g_Body-Title-BG, 10%);
  }

  .t-Body-title {
    &.has-shadow {
      box-shadow: 0 1px 0 @_base-shadow-3;
    }

    &.has-shadow:after {
      background-image: linear-gradient(@_base-shadow-2, @_base-shadow-0);
    }
  }

  .apex-rds-container {
    box-shadow: 0 -1px 0 @_base-alpha-4 inset;

    &.is-stuck:after {
      background-image: linear-gradient(@_base-shadow-2, @_base-shadow-0);
    }
  }
}

.ui-widget-content {
  background-color: @g_Region-BG;
  .text-dark();
}

.t-Body-side {
  background-color: @l_Left-Col-BG;
  color: @l_Left-Col-Text;

  @media only screen and (min-width: 641px) {
    box-shadow: 1px 0 0 @_base-alpha-4;

    .u-RTL & {
      box-shadow: -1px 0 0 @_base-alpha-4;
    }
  }
}

.apex-rds-container {
  background-color: transparent;

  .t-Body-info & {
    background-color: @g_Body-Title-BG;

    &.is-stuck {
      background-color: fadeout(@g_Body-Title-BG, 5%);
      backdrop-filter: blur(4px);
    }
  }
}

.t-Body-info {
  background-color: @g_Body-Title-BG;
}

.t-Body-title {
  &.js-hideBreadcrumbs {
    background-color: @_base-alpha-12;
  }
}



.t-Body-topButton {
  border-radius: 100%;
  background-color: lighten(@g_Body-BG, 10%);
  color: contrast(lighten(@g_Body-BG, 10%), darken(lighten(@g_Body-BG, 10%),   10%), lighten(lighten(@g_Body-BG, 10%),   10%),  43%);
  box-shadow: 0 0 0 1px @_base-alpha-4;

  &:focus {
    box-shadow: 0 0 0 1px @g_Focus inset, 0 1px 2px @_base-shadow-5;
  }

  &:hover,
  &:focus {
    color: @g_Focus;
  }

  &:hover,
  &:active {
    box-shadow: 0 1px 2px @_base-shadow-5 inset;
  }

  &:active {
    background-color: lighten(@g_Body-BG, 15%);
    color: contrast(lighten(@g_Body-BG, 15%), darken(lighten(@g_Body-BG, 15%),   10%), lighten(lighten(@g_Body-BG, 15%),   10%),  43%);
  }
}

/*
  {
    "var" : "@Head-Height",
    "name" : "UTR.LESS.HEADER_HEIGHT",
    "type" : "number",
    "units": "px",
    "range": {
      "min": 40,
      "max": 80,
      "increment": 4
    },
    "group": "UTR.LESS.LAYOUT"
  }
  */
@Head-Height: 48px;

/*
  {
    "var" : "@Nav-Exp",
    "name" : "UTR.LESS.NAVIGATION_TREE",
    "type" : "number",
    "units": "px",
    "range": {
      "min": 120,
      "max": 440,
      "increment": 10
    },
    "group": "UTR.LESS.LAYOUT"
  }
  */
@Nav-Exp: 240px;


/*
  {
    "var" : "@Actions-Exp",
    "name" : "UTR.LESS.ACTIONS_COLUMN",
    "type" : "number",
    "units": "px",
    "range": {
      "min": 160,
      "max": 440,
      "increment": 10
    },
    "group": "UTR.LESS.LAYOUT"
  }
  */
@Actions-Exp: 200px;


/*
  {
    "var" : "@Side-Exp",
    "name" : "UTR.LESS.LEFT_COLUMN",
    "type" : "number",
    "units": "px",
    "range": {
      "min": 160,
      "max": 440,
      "increment": 10
    },
    "group": "UTR.LESS.LAYOUT"
  }
  */
@Side-Exp: 240px;

@Nav-Col: 48px;
@Actions-Col: 0px;
@Side-Col: 0px;


.t-Header-branding {
  height: @Head-Height;
}

.t-Header-logo-link img {
  max-height: @Head-Height - 8px;
}

.t-Body-content {
  //min-height: 100vh;
  min-height: calc(~"100vh - "@Head-Height);
}

/* ==========================================================================
   Tree Based Navigation
   ========================================================================== */

/**
* Hide Top Menu Bar Navigation
*/

.apex-side-nav {

  .t-Body-nav,
  .t-Body-actions,
  .t-Body-title {
    top: @Head-Height;
  }

  .t-Body-title {
    @media only screen and (min-width: 641px) {
      .apex-direction-left(@Nav-Exp);
      .apex-direction-right(0);
    }
  }

  .t-Body-content {
    @media only screen and (min-width: 641px) {
      .apex-direction-margin-left(@Nav-Exp);
    }
  }

  .t-Body-main {
    .apex-direction-margin-left(0);
  }
}

/* ==========================================================================
   Menu Based Navigation
   ========================================================================== */

.apex-top-nav {
  .t-Body-actions {
    top: @Head-Height + 40;
  }

  .t-Body-title {
    top: @Head-Height + 40;
  }

  @media only screen and (max-width: 640px) {
    &.js-menuNavCollapsed {

      //      .t-Body {
      //        margin-top: @Head-Height;
      //      }
      .t-Header-nav {
        .transform-less(translateY(-100%));
      }
    }

  }
}


/**
* Base styles for Tree Nav container
*/
.t-Body-nav {
  width: @Nav-Exp;
}

/**
* Base styles for Actions
*/
.t-Body-actions {
  width: @Actions-Exp;

  .t-Button--header {
    .apex-direction-translate(-40px);
  }
}

/**
* Base styles for Side Bar
*/
.t-Body-side {
  @media only screen and (min-width: 641px) {
    width: @Side-Exp;
  }
}

.apex-side-nav {
  .t-Body-side {
    @media only screen and (min-width: 641px) {
      .apex-direction-left(@Nav-Col);
    }
  }
}

// Help fix flicker on sidebar before javascript loads
.no-anim .t-Body-nav,
.no-anim .t-TreeNav {
  background-color: transparent !important;
  border-color: transparent !important;
  visibility: hidden;
}

/* ==========================================================================
   Tree Nav Expanded
   ========================================================================== */
.apex-side-nav.js-navExpanded {
  .t-Body-main {
    .apex-direction-margin-left(@Nav-Col);
    .apex-direction-translate(@Nav-Exp - @Nav-Col);
  }

  @media only screen and (max-width: 480px) {

    //
    // Compensate for completely collapsed left column
    //
    .t-Body-title,
    .t-Body-side,
    .t-Body-content {
      .apex-direction-margin-left(0);
    }

    .t-Body-main {
      .apex-direction-margin-left(0);
      .apex-direction-translate(@Nav-Exp);
    }
  }

  @media only screen and (min-width: 641px) {
    &.t-PageBody--hideLeft {

      .t-Body-title,
      .t-Body-content,
      .t-Body-main {
        transform: none;
      }

      .t-Body-title {
        .apex-direction-left(@Nav-Exp);
        .apex-direction-right(0);
      }

      .t-Body-content {
        .apex-direction-margin-left(@Nav-Exp - @Nav-Col);
      }

      .t-Body-main {
        .apex-direction-margin-left(@Nav-Col);
      }
    }

    // .t-Body-title,
    .t-Body-side {
      .translate3d-less(@Nav-Exp, 0, 0);

      .u-RTL & {
        .translate3d-less(-@Nav-Exp, 0, 0);
      }
    }

    &.t-PageBody--showLeft {
      .t-Body-main {
        .apex-direction-margin-left(0);
        transform: none;
      }

      // .t-Body-title,
      .t-Body-side {
        .apex-direction-left(0);
      }

      .t-Body-content {
        .apex-direction-margin-left(@Side-Exp + @Nav-Col);

        :not(.u-RTL) & {
          .translate3d-less(@Nav-Exp - @Nav-Col, 0, 0);
        }

        .u-RTL & {
          .translate3d-less(-@Nav-Exp + @Nav-Col, 0, 0);
        }
      }

      .t-Body-title {
        .apex-direction-left(0);

        :not(.u-RTL) & {
          .translate3d-less(@Nav-Exp, 0, 0);
        }

        .u-RTL & {
          .translate3d-less(-@Nav-Exp, 0, 0);
        }
      }
    }
  }

  @media only screen and (min-width:  993px) {
    &.t-PageBody--showLeft {
      .t-Body-main {
        .apex-direction-margin-left(0);
        transform: none;
      }

      .t-Body-title {
        transform: none !important;
        .apex-direction-margin-left(@Nav-Exp);
      }

      .t-Body-content {
        .apex-direction-margin-left(@Side-Exp + @Nav-Exp);

        :not(.u-RTL) &,
        .u-RTL & {
          transform: none;
        }
      }
    }
  }
}

/* ==========================================================================
   Tree Nav Collapsed
   ========================================================================== */
.apex-side-nav.js-navCollapsed {

  .t-Body-nav,
  .t-Body-nav .t-TreeNav {
    width: @Nav-Col;
  }

  .t-Body-content,
  .t-Body-title,
  .t-Body-side {
    .apex-direction-margin-left(@Nav-Col);
  }

  .t-Body-title.is-stuck {
    .apex-direction-left(0);
  }

  @media only screen and (max-width: 480px) {

    //
    // Completely hide left column when on very small screens
    //
    .t-Body-nav {
      .transform-less(translateX(-@Nav-Col));

      .transform-less(translateX(-@Nav-Col));

      .u-RTL & {
        .transform-less(translateX(@Nav-Col));
      }
    }

    .t-Body-title,
    .t-Body-side,
    .t-Body-content {
      .apex-direction-margin-left(0);
    }
  }

  @media only screen and (max-width: 640px) {
    &.t-PageBody.js-rightExpanded {
      .t-Body-main {
        .apex-direction-margin-left(0);
      }
    }
  }

  @media only screen and (min-width: 641px) {
    .t-Body-title {
      .apex-direction-margin-left(0);
      .apex-direction-left(@Nav-Col);
    }

    &.t-PageBody--showLeft {
      .t-Body-side {
        .apex-direction-margin-left(0);
      }

      .t-Body-content {
        .apex-direction-margin-left(@Side-Exp + @Nav-Col);
      }
    }
  }

  @media only screen and (min-width:  993px) {
    .t-Body-side {
      .apex-direction-left(@Nav-Col);
    }
  }
}

/* ==========================================================================
   Tree Nav Hidden
   ========================================================================== */
.apex-side-nav.js-navCollapsed--hidden {
  &.js-navCollapsed .t-Body-nav {
    width: 0;
    visibility: hidden;

    .a-TreeView-badge {
      visibility: hidden !important; // Force hidden badges to hide when sidebar is hidden off screen. 19.2 bug
    }
  }

  .t-Body-nav,
  .t-Body-nav .t-TreeNav {
    width: @Nav-Exp;
  }

  .t-Body-content,
  .t-Body-title,
  .t-Body-side {
    .apex-direction-margin-left(0);
  }

  .t-Body-title.is-stuck {
    .apex-direction-left(0);
  }

  @media only screen and (max-width: 480px) {

    //
    // Completely hide left column when on very small screens
    //
    .t-Body-nav {
      .transform-less(translateX(0));

      .u-RTL & {
        .transform-less(translateX(0));
      }
    }

    .t-Body-title,
    .t-Body-side,
    .t-Body-content {
      .apex-direction-margin-left(0);
    }
  }

  @media only screen and (max-width: 640px) {
    &.t-PageBody.js-rightExpanded {
      .t-Body-main {
        .apex-direction-margin-left(0);
      }
    }
  }

  @media only screen and (min-width: 641px) {
    .t-Body-title {
      .apex-direction-margin-left(0);
      // .apex-direction-left(@Nav-Col);
      .apex-direction-left(0);
    }

    &.t-PageBody--showLeft {
      .t-Body-side {
        // .apex-direction-margin-left(0);
        .apex-direction-left(0);
      }

      .t-Body-content {
        // .apex-direction-margin-left(@Side-Exp + @Nav-Col);
        .apex-direction-margin-left(@Side-Exp);
      }
    }
  }

  @media only screen and (min-width:  993px) {
    .t-Body-side {
      //.apex-direction-left(@Nav-Col);
      .apex-direction-margin-left(0);
      .apex-direction-left(0);
    }

    &.t-PageBody--showLeft {
      .t-Body-side {
        // .apex-direction-margin-left(0);
        .apex-direction-left(0);
      }

      .t-Body-content {
        .apex-direction-margin-left(@Side-Exp);
      }
    }

    &.t-PageBody--showLeft.js-navExpanded {
      .t-Body-content {
        .apex-direction-margin-left(@Side-Exp + @Nav-Exp);
      }
    }
  }
}

/* ==========================================================================
   Actions Expanded
   ========================================================================== */
.t-PageBody.js-rightExpanded {
  .t-Body-main {
    margin-right: 0;
  }

  .t-Body-main,
  .t-Body-nav {
    .apex-direction-translate(-@Actions-Exp);
  }

  @media only screen and (min-width: 641px) {
    &.t-PageBody--hideLeft {

      .t-Body-main,
      .t-Body-nav {
        transform: none;
      }

      .t-Body-main {
        .apex-direction-margin-right(@Actions-Exp);
      }

      .t-Body-title {
        :not(.u-RTL) & {
          right: @Actions-Exp;
        }

        .u-RTL & {
          left: @Actions-Exp;
        }
      }
    }

    &.t-PageBody--showLeft {
      .t-Body-title {
        .apex-direction-right(0);
      }
    }

    &.js-navCollapsed.t-PageBody--showLeft {
      .t-Body-side {
        .apex-direction-margin-left(0);
        .apex-direction-left(0);
      }
    }
  }

  @media only screen and (min-width:  993px) {
    &.t-PageBody--showLeft {
      .t-Body-main {
        .apex-direction-margin-right(@Actions-Exp);
        // margin-right: @Actions-Exp;
      }

      .t-Body-main,
      .t-Body-nav {
        transform: none;
      }

      .t-Body-title {
        .apex-direction-right(@Actions-Exp);
        // right: @Actions-Exp;
      }
    }

    &.js-navCollapsed.t-PageBody--showLeft:not(.js-navCollapsed--hidden) {
      .t-Body-side {
        .apex-direction-left(@Nav-Col);
      }
    }
  }

  @media only screen and (max-width: 992px) {
    &.t-PageBody--showLeft {
      .t-Body-main {
        transform: none;
      }

      .t-Body-title,
      .t-Body-side,
      .t-Body-content {
        .apex-direction-translate(-@Actions-Exp);
      }

      .t-Body-side {
        margin-left: @Nav-Col !important;

        .u-RTL & {
          margin-left: 0 !important;
          right: @Nav-Col !important;
        }
      }
    }
  }
}

/* ==========================================================================
   Actions Collapsed
   ========================================================================== */
.t-PageBody.js-rightCollapsed {
  .t-Body-main {
    margin-right: @Actions-Col;
  }

  .t-Body-title {
    right: @Actions-Col;
  }

  .t-Body-actions {
    .apex-direction-translate(@Actions-Exp);
  }
}


/* ==========================================================================
   Show Left Side Bar
   ========================================================================== */

.t-PageBody--showLeft {
  @media only screen and (min-width: 641px) {
    .t-Body-content {
      .apex-direction-margin-left(@Side-Exp);
    }
  }
}

/*
{
    "var": "@g_Body-Content-Max-Width",
    "name": "UTR.LESS.BODY_CONTENT_MAX_WIDTH",
    "type": "select",
    "options": [
        {
            "d": "Auto",
            "r": "100%"
        },
        {
            "d": "768 pixels",
            "r": "768px"
        },
        {
            "d": "1024 pixels",
            "r": "1024px"
        },
        {
            "d": "1280 pixels",
            "r": "1280px"
        },
        {
            "d": "1440 pixels",
            "r": "1440px"
        },
        {
            "d": "1920 pixels",
            "r": "1920px"
        }
    ],
    "group": "UTR.LESS.LAYOUT"
}
*/
@g_Body-Content-Max-Width: 100%;

.t-Body-contentInner {
  margin: 0 auto;
  max-width: @g_Body-Content-Max-Width;
}


// Skip to Main Content Link
#t_Body_skipToContent {
  color: @g_Accent-BG;
  background-color: @g_Accent-FG;
}


/* Full Width Mega Menu
   ========================================================================== */
.t-MegaMenu--fullWidth {
  &:not(.js-menu-callout) {
    padding-top: (@Head-Height - 32px) / 2;
  }
}

/* Column Widths when using X layout columns
   ========================================================================== */
.t-MegaMenu--layout2Cols,
.t-MegaMenu--layout3Cols,
.t-MegaMenu--layout4Cols,
.t-MegaMenu--layout5Cols {
  .t-MegaMenu-item--top {
    max-width: @Nav-Exp;
  }
}