@import "_variables";

/* ==========================================================================
   Color Utility Classes
   ========================================================================== */
@l_Button-Hot-BG: @g_Accent-BG;
@l_Button-Hot-Text: contrast(@l_Button-Hot-BG, darken(@l_Button-Hot-BG,   85%), lighten(@l_Button-Hot-BG,   85%),  43%);

/* Warning State
   ========================================================================== */
.u-warning {
  background-color: @g_Warning-BG;
  color: @g_Warning-FG;

  &-text {
    color: @g_Warning-BG;
  }

  &-bg {
    background-color: @g_Warning-BG;
  }

  &-border {
    border-color: @g_Warning-BG;
  }
}

/* Success State
   ========================================================================== */
.u-success {
  background-color: @g_Success-BG;
  color: @g_Success-FG;

  &-text {
    color: @g_Success-BG;
  }

  &-bg {
    background-color: @g_Success-BG;
  }

  &-border {
    border-color: @g_Success-BG;
  }
}

/* Danger State
   ========================================================================== */
.u-danger {
  background-color: @g_Danger-BG;
  color: @g_Danger-FG;

  &-text {
    color: @g_Danger-BG;
  }

  &-bg {
    background-color: @g_Danger-BG;
  }

  &-border {
    border-color: @g_Danger-BG;
  }
}

/* Info State
   ========================================================================== */
.u-info {
  background-color: @g_Info-BG;
  color: @g_Info-FG;

  &-text {
    color: @g_Info-BG;
  }

  &-bg {
    background-color: @g_Info-BG;
  }

  &-border {
    border-color: @g_Info-BG;
  }
}

/* Hot State
   ========================================================================== */
.u-hot {
  background-color: @l_Button-Hot-BG;
  color: @l_Button-Hot-Text;

  &-text {
    color: @l_Button-Hot-BG;
  }

  &-bg {
    background-color: @l_Button-Hot-BG;
  }

  &-border {
    border-color: @l_Button-Hot-BG;
  }
}

/* Normal State
   ========================================================================== */
.u-normal {
  background-color: @g_Body-BG;
  color: @g_Body-Text;

  &-text {
    color: @g_Body-Text;
  }

  &-bg {
    background-color: @g_Body-Text;
  }

  &-border {
    border-color: @g_Body-Text;
  }
}