@import "../mixins/less/mixins";

.widget-function('import_google_font');

@icon-color: #fff;
@radius: 0em;
@size: standard;
@text-color: #fff;
@background: #333;
@theme: flat;
@close-color: #fff;
@close-background: '';
@close-radius: 0em;
@font-fly: default;
@font-wt: bold;
@font-size: '';

.iw-so-alert {
  color: @text-color;
  border-radius: @radius;

  .alert-size() when (@size =small) {
    font-size: 0.95em;
    padding: 0.875em 2em 0.875em 3em;
  }

  .alert-size() when (@size =standard) {
    font-size: 1.25em;
    padding: 1em 2.5em 1em 3.2em;
  }

  .alert-size() when (@size =large) {
    font-size: 1.5em;
    padding: 1.125em 3em 1.125em 3em;
  }

  .alert-size();

  .alert-theme() when (@theme =classic) {
    .gradient(@background, darken(@background, 15%), @background);
    border: 1px solid;
    border-color: darken(@background, 8%) darken(@background, 10%) darken(@background, 13%) darken(@background, 10%);
  }

  .alert-theme() when (@theme =flat) {
    background: @background;
    border: 1px solid @background;
  }

  .alert-theme() when (@theme =outline) {
    background: transparent;
    border: 1px solid @background;
  }

  .alert-theme() when (@theme =threed) {
    background: @background;
    border: solid darken(@background, 10%);
    border-width: 0 0 5px 0;
  }

  .alert-theme() when (@theme =shadow) {
    .drop-shadow(1px, 1px, 4px, 0.4);
    background: @background;
    border: 1px solid @background;
  }

  .alert-theme() when (@theme =modern) {
    background: @background;
    .box-shadow(inset 5px 0px 0px darken(@background, 25%))
  }

  .alert-theme();

  [class^="sow-icon-"] {
    color: @icon-color;

    .icon-size() when (@size =small) {
      left: 1.5em;
      font-size: 1em;
    }

    .icon-size() when (@size =standard) {
      left: 1em;
      font-size: 1.25em;
    }

    .icon-size() when (@size =large) {
      left: 0.5em;
      font-size: 1.5em;
    }

    .icon-size();

  }

  .iw-so-alert-msg {
    line-height: 1.5;
    .font(@font-fly, @font-wt);
    font-size: @font-size;
  }

  .close {
    color: @close-color;
    background: @close-background;
    border-radius: @close-radius;

    .close-size() when (@size =small) {
      font-size: 1em;
      padding: 5px 8px;
    }

    .close-size() when (@size =standard) {
      font-size: 1.15em;
      padding: 5px 8px;
    }

    .close-size() when (@size =large) {
      font-size: 1.4em;
      padding: 5px 10px;
    }

    .close-size();
  }

}