/**
 * Import Compass and Theme Variables
 */

@import "_variables";
/******************************************************************************
Color Variables
******************************************************************************/

@g_Border-Outer: contrast(@g_Region-BG, darken(@g_Region-BG,   15%), lighten(@g_Region-BG,   15%),  43%);

.t-MediaList {
  border-color: @g_Border-Outer;
  background-color: @g_Region-BG;
}

.t-MediaList-item {
  border-color: @g_Border-Outer;
}

.t-MediaList-item.is-active {
  background-color: rgba(0, 0, 0, .05);
}

.t-MediaList--horizontal .t-MediaList-item {
  border-right: 1px solid @g_Border-Outer;
}


/* ==========================================================================
   Link
   ========================================================================== */
.t-MediaList-icon {
  background-color: lighten(@g_Region-FG-Light, 25%);
  color: #FFF;
}

a.t-MediaList-itemWrap {
  color: @g_Link-Base;

  &:hover {
    background-color: contrast(@g_Region-BG, darken(@g_Region-BG,   5%), lighten(@g_Region-BG,   5%),  43%);
    color: @g_Link-Base;

    .t-MediaList-badge {}
  }
}

.t-MediaList-itemWrap {
  color: @g_Region-FG;
}

.t-MediaList-badge,
.t-MediaList-desc {
  color: @g_Region-FG-Light;
  font-size: 1.3rem;
}

.t-MediaList--cols {
  .t-MediaList-item {

    &:before,
    &:after {
      background-color: contrast(@g_Region-BG, darken(@g_Region-BG,   10%), lighten(@g_Region-BG,   10%),  43%);
    }
  }
}