@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,  75%), 100%), desaturate(lighten(@l_Card-BG,  75%), 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,  75%), lighten(@l_Card-BG,  75%)), 100%);
}
.t-Card-colorFill,
.t-Card-icon {
  background-color: fade(contrast(@l_Card-BG, darken(@l_Card-BG,  25%), lighten(@l_Card-BG,  25%)), 100%);
}