.notice {
  width: $notice-width;
  margin-right: $notice-spacer-right;
  position: fixed;
  z-index: $zindex-notification;

  &-notice {
    margin-bottom: $notice-spacer-bottom;
    padding: $notice-padding;
    //border: 1px solid @border-color-split;
    @include border-radius($border-radius);
    box-shadow: $shadow-base;
    background: #fff;
    line-height: 1;
    position: relative;
    overflow: hidden;

    &-close {
      position: absolute;
      right: $notice-padding;
      top: $notice-padding;
      outline: none;
      cursor: pointer;
      i {
        font-size: $notice-close-icon-font-size;
        color: $notice-close-icon-color;
        transition: color $transition-time ease;

        &:hover {
          color: $notice-close-icon-hover-color;
        }
      }
    }
  }

  &-title {
    font-size: $notice-title-font-size;
    color: $headings-color;
    padding-right: $notice-close-icon-font-size;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &-with-desc &-title {
    margin-bottom: $notice-title-spacer-bottom;
  }
  &-with-icon{
    margin-left: $notice-padding + $notice-icon-size;
  }
  &-with-desc.notice-with-icon{
    margin-left: $notice-padding + $notice-with-desc-icon-size;
  }

  &-desc {
    font-size: $notice-desc-font-size;
    color: $notice-desc-color;
    text-align: justify;
    line-height: 1.5;
  }


  &-icon {
    position: absolute;
    left: $notice-padding;
    font-size: $notice-icon-size;
    &-success {
      color: $brand-success;
    }
    &-info {
      color: $brand-info;
    }
    &-warning {
      color: $brand-warning;
    }
    &-danger {
      color: $brand-danger;
    }
  }
  &-with-desc &-icon {
    font-size: $notice-with-desc-icon-size;
  }

  &-custom-content {
    &:after {
      content: "";
      display: block;
      width: 4px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
    }
  }
  &-with-normal {
    &:after {
      background: $brand-primary;
    }
  }
  &-with-info {
    &:after {
      background: $brand-info;
    }
  }
  &-with-success {
    &:after {
      background: $brand-success;
    }
  }
  &-with-warning {
    &:after {
      background: $brand-warning;
    }
  }
  &-with-danger {
    &:after {
      background: $brand-danger;
    }
  }
}