$componentCls: 'ud-inline-message';

$default-text-color: #666;
$default-border-color: #ccc;
$default-background-color: #fff;
$warning-text-color: #993300;
$warning-border-color: #FF9900;
$warning-background-color: #FFF3E0;
$error-text-color: #333333;
$error-border-color: #9c1817;
$error-background-color: #ffd6db;
$info-text-color: #333333;
$info-border-color: #4f7db6;
$info-background-color: #d9ebfb;
$icon-color-default: #aaa;
$icon-color: white;

.#{$componentCls} {
  border: solid 1px $default-border-color;
  border-radius: 3px;
  display: table;
  font-size: 12px;
  color: $default-text-color;
  background-color: $default-background-color;
  width: 100%;

  &.#{$componentCls}-noicon {
    .#{$componentCls}-content {
      padding: 8px
    }
  }

  .#{$componentCls}-icon_large {
    .ud-icon:before {
      font-size: 26px;
    }
  }

  .#{$componentCls}-icon_medium {
    .ud-icon:before {
      font-size: 20px;
    }
  }

  .#{$componentCls}-icon_small {
    .ud-icon:before {
      font-size: 14px;
    }
  }

  .#{$componentCls}-icon {
    .ud-icon:before {
      color: $icon-color-default;
    }
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
    width: 10%;
    height: 100%;
    padding: 10px;
    background-color: $default-background-color;
    border: none;
  }
  .#{$componentCls}-content {
    border-radius: 3px;
    display: table-cell;
    height: 100%;
    vertical-align: middle;
    padding: 8px;
    white-space: pre-wrap;
  }

  &.#{$componentCls}-type-error {
    border: solid 1px $error-border-color;
    color: $error-text-color;
    background-color: $error-background-color;

    .#{$componentCls}-icon {
      background-color: $error-border-color;
    }
  }

  &.#{$componentCls}-type-warning {
    border: solid 1px $warning-border-color;
    color: $warning-text-color;
    background-color: $warning-background-color;

    .#{$componentCls}-icon {
      background-color: $warning-border-color;
    }
  }

  &.#{$componentCls}-type-info {
    border: solid 1px $info-border-color;
    color: $info-text-color;
    background-color: $info-background-color;

    .#{$componentCls}-icon {
      background-color: $info-border-color;
    }
  }
  &.#{$componentCls}-type-info,
  &.#{$componentCls}-type-warning,
  &.#{$componentCls}-type-error {
    .#{$componentCls}-icon {
      .ud-icon:before {
        color: $icon-color;
      }
    }
  }
}