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