@import '../../style/themes/index';
@import '../../style/mixins/index';

@notification-prefix-cls: ~'@{ant-prefix}-notification';

.@{notification-prefix-cls} {
  &-rtl {
    direction: rtl;
  }

  &-notice {
    padding: 0;
    
    &-content{
      position: relative;
      padding: 16px 24px;
      font-size: 12px;
    }

    &-closable &-message {
      .@{notification-prefix-cls}-rtl & {
        padding-right: 0;
        padding-left: 24px;
      }
    }

    &-with-icon &-message {
      .@{notification-prefix-cls}-rtl & {
        margin-right: 48px;
        margin-left: 0;
      }
    }

    &-with-icon &-description {
      .@{notification-prefix-cls}-rtl & {
        margin-right: 48px;
        margin-left: 0;
      }
    }

    &-icon {
      .@{notification-prefix-cls}-rtl & {
        margin-right: 4px;
        margin-left: 0;
      }
    }

    &-close {
      .@{notification-prefix-cls}-rtl & {
        right: auto;
        left: 22px;
      }
    }

    &-btn {
      .@{notification-prefix-cls}-rtl & {
        float: left;
      }
    }

    .message_progress {
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: @primary-color;
      left: 0;
      bottom: 0;
      animation-name: Progress;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      transition: width .2s;
      animation-timing-function: linear;
      margin-bottom: 0 !important;
    }

    &:hover {
      .message_progress {
        width: 100%;
        animation-name: none;
        animation-play-state: paused;
      }
    }
  }
}

@keyframes Progress {
  from {
    width: 100%;
  }

  to {
    width: 0;
  }
}