@import "var";

.@{prefixName}-notice-bar {
  display: flex;
  height: 32px;
  line-height: 32px;
  overflow: hidden;
  font-size: 14px;
  color: #fff;
  border-radius: 2px;

  &--normal {
    .@{prefixName}-notice-bar {
      &__hd {
        background-color: @notice-bar-normal-head-bg-color;
      }

      &__bd {
        color: @notice-bar-normal-color;
        background-color: @notice-bar-normal-body-bg-color;

        &::after {
          background-image: -webkit-linear-gradient(
						0deg,
						rgba(@notice-bar-normal-body-bg-color, .6) 0,
						rgba(@notice-bar-normal-body-bg-color, 0) 20%,
						rgba(@notice-bar-normal-body-bg-color, 0),
						rgba(@notice-bar-normal-body-bg-color, 0) 80%,
						rgba(@notice-bar-normal-body-bg-color, .6) 100%
					);
        }
      }
    }
  }

  &--aberrant {
    .@{prefixName}-notice-bar {
      &__hd {
        background-color: @notice-bar-aberrant-head-bg-color;
      }

      &__bd {
        color: @notice-bar-aberrant-color;
        background-color: @notice-bar-aberrant-body-bg-color;

        &::after {
          background-image: -webkit-linear-gradient(
						0deg,
						rgba(@notice-bar-aberrant-body-bg-color, .6) 0,
						rgba(@notice-bar-aberrant-body-bg-color, 0) 20%,
						rgba(@notice-bar-aberrant-body-bg-color, 0),
						rgba(@notice-bar-aberrant-body-bg-color, 0) 80%,
						rgba(@notice-bar-aberrant-body-bg-color, .6) 100%
					);
        }
      }
    }
  }


  &__hd {
  	padding-left: 12px;
  	padding-right: 12px;
    font-size: 16px;
    background-color: #17A7FF;
    text-align: center;

    .text {
    	font-weight: bold;
    }
  }

  &__bd {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: @notice-bar-color;

    &-inner {
    	display: inline-block;
    	padding-left: 12px;
    	padding-right: 12px;
    	white-space: nowrap;
    	position: absolute;

    	&--animation {
    		animation: 20s linear 3s infinite move_narquee;
    	}
    }
  }
}

@-webkit-keyframes move_narquee {
	0% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(-100%);
	}

	50.01% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(0);
	}
}

@keyframes move_narquee {
	0% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(-100%);
	}

	50.01% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(0);
	}
}