/** 
 * Import Compass and Theme Variables
 */

@import "_variables";

/* ==========================================================================
   Links List
   ========================================================================== */


.t-LinksList-item {
//  border-color: #F0F0F0;
  border-color: contrast(@g_Region-BG, darken(@g_Region-BG,   10%), lighten(@g_Region-BG,   10%),  43%);
}
.t-LinksList-icon {
  color: #A0A0A0;
}
.t-LinksList-link {
  &:hover {
    .region-hover();
    .t-LinksList-icon {
      color:  @g_Link-Base;
    }
  }
}


/**
 * Modifier: Go To Arrow
 *
 * Show Go To Arrow on right
 */
.t-LinksList--showArrow {
  .t-LinksList-link {
    &:hover {
      &:before {
        color: @g_Link-Base;
      }
    }
    &:before {
      color: rgba(0,0,0,.15);
    }
  }
  &.t-LinksList--brightHover .t-LinksList-link:hover:before {
    color: rgba(255,255,255,.5);
  }
}

/**
 * Modifier: Show Badge
 *
 * Show Badge on Right
 */
.t-LinksList--showBadge {
  .t-LinksList-badge {
    background-color: contrast(@g_Region-BG, darken(@g_Region-BG,   10%), lighten(@g_Region-BG,   10%),  43%);
    color: #666;
  }
  .t-LinksList-link:hover .t-LinksList-badge {
    background-color:@g_Link-Base;
    color: contrast(@g_Link-Base, darken(@g_Link-Base,   75%), lighten(@g_Link-Base,   75%),  43%);
  }
  &.t-LinksList--brightHover {
    .t-LinksList-link:hover .t-LinksList-badge {
      background-color: rgba(0,0,0,.15);
      color: #FFF;
    }
  }
  .t-LinksList-item.is-expanded > .t-LinksList-link .t-LinksList-badge {
    background-color: contrast(@g_Region-BG, darken(@g_Region-BG,   25%), lighten(@g_Region-BG,   25%),  43%);
//    background-color: rgba(0,0,0,.1);
  }
}

/**
 * Modifier: Bright Hover
 *
 * Show Bright
 */
.t-LinksList--brightHover {
  .t-LinksList-item.is-expanded .t-LinksList-link:hover:before {
    color: rgba(255,255,255,.5);
  }
  .t-LinksList-link {
    &:hover {
      background-color: @g_Accent-BG;
      color: contrast(@g_Accent-BG, darken(@g_Accent-BG,   75%), lighten(@g_Accent-BG,   75%),  43%);
      .t-LinksList-icon {
        color: @g_Link-Base;
      }
    }
  }
}

/* ==========================================================================
   Icon-based Links List
   ========================================================================== */
.t-LinksList--iconOnly {
  .t-LinksList-link {
    color: #666;
//    color: #707070;
    &:hover,
    &:focus {
      background-color: #FFF;
      .text-dark();
    }
  }
  .t-LinksList-icon {
    background-color: #FFF;
    border: 1px solid rgba(208,208,208,.5);
  }
  .t-LinksList-link:hover,
  .t-LinksList-link:focus {
    background-color: lighten(@g_Accent-BG,10%);
    .t-LinksList-icon {
      background-color: #fff;
      border-color: #FFF;
      color: @g_Accent-BG;
    }
  }
  .is-current {
    .t-LinksList-icon {
      background-color: @g_Accent-BG;
      border-color: @g_Accent-BG;
      color: #FFF;
    }
  }
}

.t-LinksList-item.is-expanded  {
  background-color: #FCFCFC;
  background: linear-gradient(rgba(0,0,0,.015),rgba(0,0,0,0)), linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.015));
  .t-LinksList-link:hover:before {
    color: @g_Accent-BG;
  }
  .t-LinksList-link:before {
    color: rgba(0,0,0,.25)
  }
}
.t-LinksList--showBadge {
  .t-LinksList-badge {
    border-radius: 4px;
  }
}
.t-LinksList--iconOnly {
  .t-LinksList-icon {
    border-radius: 100%;
  }
}
.t-LinksList--actions {
  .t-LinksList-label {
    color: @g_Actions-Col-Text;
  }
  .t-LinksList-icon {
    color: @g_Actions-Col-Text;
  }
  .t-LinksList-link:hover {
    // color: text-contrast(@g_Actions-Col-BG);
//    background-color: rgba(0,0,0,.025);
    .t-LinksList-icon {
//      color: #707070;
      // color: text-contrast(@g_Actions-Col-BG);
    }
  }
}


.t-LinksList--actions .t-LinksList-label {
  font-size: 1.3rem;
}