@import "_variables";

/* ==========================================================================
   Cards Container
   ========================================================================== */

@l_Card-BG: @g_Region-BG;

.t-Card-wrap {
  border-radius: 2px;
  background-color: @l_Card-BG;

  &:focus {
    border-color: @g_Focus;
  }
}

.t-Card-icon {
  color: @l_Card-BG;
}

.t-Card-desc {
  color: fade(contrast(@l_Card-BG, desaturate(darken(@l_Card-BG,  85%), 100%), desaturate(lighten(@l_Card-BG,  85%), 50%)), 100%);
}

.t-Card-info,
.t-Card-subtitle {
  color: fade(contrast(@l_Card-BG, desaturate(darken(@l_Card-BG,  60%), 100%), desaturate(lighten(@l_Card-BG,  60%), 50%)), 100%);
}

.t-Card-title {
  color: fade(contrast(@l_Card-BG, darken(@l_Card-BG,  85%), lighten(@l_Card-BG,  85%)), 100%);
}

.t-Card-colorFill,
.t-Card-icon {
  background-color: @g_Accent-BG;
  color: @g_Accent-FG;
}