/**
 * Import Compass and Theme Variables
 */

@import "_variables";

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


.t-LinksList-item,
.t-LinksList-link {
  //  border-color: #F0F0F0;
  border-color: contrast(@g_Region-BG, darken(@g_Region-BG,   10%), lighten(@g_Region-BG,   10%),  43%);
}

.t-LinksList-icon {
  color: contrast(@g_Region-BG, darken(@g_Region-BG,   15%), lighten(@g_Region-BG,   15%),  43%);
}

.t-LinksList-link {
  &:hover {
    .region-hover();
  }

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

/* ==========================================================================
   Icon-based Links List
   ========================================================================== */
.t-LinksList--actions {
  .t-LinksList-item--separator {
    border-bottom-color: @_base-alpha-2;
  }
}

/**
 * Modifier: Go To Arrow
 *
 * Show Go To Arrow on right
 */
.t-LinksList--showArrow {
  .t-LinksList-link {

    // &:hover {
    //   &:before {
    //     color: @g_Accent-BG;
    //   }
    // }
    &:before {
      color: contrast(@g_Region-BG, darken(@g_Region-BG,   15%), lighten(@g_Region-BG,   15%),  43%);
    }
  }

  // &.t-LinksList--brightHover .t-LinksList-link:hover:before {
  //   color: @_base-bg-alpha-9;
  // }
}

/**
 * Modifier: Show Badge
 *
 * Show Badge on Right
 */
.t-LinksList--showBadge {
  .t-LinksList-badge {
    background-color: contrast(@g_Region-BG, darken(@g_Region-BG,   4%), lighten(@g_Region-BG,   4%),  43%);
    color: @g_Region-FG;
  }

  .t-LinksList-link:hover .t-LinksList-badge {
    background-color: contrast(@g_Region-BG, darken(@g_Region-BG,   8%), lighten(@g_Region-BG,   8%),  43%);
  }

  // &.t-LinksList--brightHover {
  //   .t-LinksList-link:hover .t-LinksList-badge {
  //     background-color: @_base-alpha-5;
  //     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: @_base-alpha-4;
  }
}

/**
 * Modifier: Bright Hover
 *
 * Show Bright
 */
.t-LinksList--brightHover {
  .t-LinksList-item.is-expanded .t-LinksList-link:hover:before {
    color: @_base-bg-alpha-9;
  }

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

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

.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 {

    .t-LinksList-icon,
    .t-LinksList-label,
    .t-LinksList-badge {
      color: contrast(@g_Accent-OG, darken(@g_Accent-OG,   75%), lighten(@g_Accent-OG,   75%),  43%);
    }
  }
}

.t-Body-actions .t-LinksList-link {
  &:hover {
    background-color: contrast(@g_Actions-Col-BG, darken(@g_Actions-Col-BG,   5%), lighten(@g_Actions-Col-BG,   5%),  43%);
  }
}