@function rem($value){
    @return #{$value/75}rem;
}

@mixin icon-arrow(
    $dir: 'rt', // lf, tp, bt
    $width: 10px,
    $height: 10px,
    $heavy: 1PX,
    $borderColor: #999
) {
    display: inline-block;
    width: $width;
    height: $height;
    &:after {
        display: block;

        width: $width;
        height: $height;
        margin-left: 0;

        content: '';

        border: $heavy solid $borderColor;
        border-top: 0 none;
        border-left: 0 none;

        @if ($dir == 'lf') {

            transform: rotate(135deg);

        } @else if ($dir == 'rt') {

            transform: rotate(-45deg);

        } @else if ($dir == 'bt') {

            transform: rotate(45deg);
            margin-top: -2px;

        } @else if ($dir == 'tp') {
            transform: rotate(-135deg);
        }
    }
}

.m-notice-bar {

    display: flex;
    font-size: 12px;
    padding: rem(20) rem(50);
    overflow: hidden;
    align-items: center;

    color: #343434;

    .icon-notice {
        display: inline-block;
        width: rem(30);
        height: rem(30);
        background: url('../img/icon-notice-tip.png') no-repeat center;
        background-size: 100% 100%;
        margin-right: 5px;
    }
    .icon-close {
        display: inline-block;
        margin-left: rem(20);
        width: rem(20);
        height: rem(20);
        overflow: hidden;
        background: url('../img/icon-close.png') no-repeat center;
        background-size: 100% 100%;
    }

    .icon-arrow {
        padding-right: rem(10);
        margin-left: rem(20);
        @include icon-arrow('rt', rem(14), rem(14));

    }

    &-content {
        display: block;
        flex: 1;
        width: 100%;
        overflow: hidden;
    }

    &-tips {
        color:rgba(255,165,107,1);
        background:rgba(255,246,229,1);
    }

    &-text {
        background:rgba(56,134,246,0.05);
        color:rgba(56,134,246,0.6);
    }

    &-warning {
        background:rgba(255,95,95,0.05);
        .icon-notice {
            background: url(//j1.58cdn.com.cn/jinrong/images/ems15905818611700e272e0bf3b64.png) no-repeat center;
            background-size: 100% 100%;
            width: rem(40);
            height: rem(40);
        }
    }
}