/**
 * Import Compass and Theme Variables
 */

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

@g_Border-Outer:            contrast(@g_Region-BG, darken(@g_Region-BG,   12%), lighten(@g_Region-BG,   12%),  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
   ========================================================================== */
a.t-MediaList-itemWrap {
  color: @g_Link-Base;
  &:hover {
    background-color: contrast(@g_Region-BG, darken(@g_Region-BG,   2%), lighten(@g_Region-BG,   2%),  43%);
    color: @g_Link-Base;
    .t-MediaList-badge {
    }
  }
  &:focus {
    box-shadow:0 0 0 1px @g_Focus inset;
  }
}

.t-MediaList-itemWrap {
  color: @g_Region-FG;
}
.t-MediaList-badge,
.t-MediaList-desc {
  color: @g_Region-FG-Light;
}
.t-MediaList-icon {
  background-color: contrast(@g_Region-BG, darken(@g_Region-BG,  25%), lighten(@g_Region-BG,  25%),  43%);
  color: @g_Region-BG;
}

.t-MediaList--cols {
  box-shadow: -1px -1px 0 0 @g_Border-Outer inset;
  .t-MediaList-item {
    &:before,
    &:after {
      background-color: contrast(@g_Region-BG, darken(@g_Region-BG,   10%), lighten(@g_Region-BG,   10%),  43%);
    }
  }
}

/* ==========================================================================
   Modifier: Apply Theme Colors
   ---
   Adds theme colors to the items.
   ========================================================================== */
.t-MediaList.u-colors {

}