$notice-bar-height: 36px !default;
$notice-bar-padding-hor: 16px !default;
$notice-bar-font-size: 14px !default;

$notice-bar-btn-width: 64px !default;
$notice-bar-btn-height: 24px !default;
$notice-bar-btn-font-size: 12px !default;

$notice-bar-theme-colors: (
  'yellow': $yellow,
  'red': $error,
  'white': $white
) !default;

.mx{
  &-notice-bar{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    padding-left: $notice-bar-padding-hor;
    padding-right: $notice-bar-padding-hor;

    height: $notice-bar-height;
    font-size: $notice-bar-font-size;

    @each $name, $color in $notice-bar-theme-colors {
      &--#{$name} {
        color: $color;
  
        @if ($name == 'white') {
          background: rgba($dark-black, 0.1);
        } @else {
          background: rgba($color, 0.1);
        }
  
        .mx-notice-bar-left {
          color: $color;
        }
  
        .mx-notice-bar-btn {
          border: 1px solid $color;
          color: $color;
        }
      }
    }

    &-left{
      font-size: 0;
    }

    &-middle{
      flex: 1;
      overflow: hidden;
      
      .mx-notice-bar-text{
        padding-left: 8px;
        padding-right: 8px;

        @include text-ellipsis();
      }
    }

    &-right{
      font-size: 0;
      .mx-notice-bar-btn{
        @include round-rectangle($notice-bar-btn-width, $notice-bar-btn-height);
        line-height: $notice-bar-btn-height - 2px;
        font-size: $notice-bar-btn-font-size;
        text-align: center;
        cursor: pointer;
        user-select: none;
        box-sizing: border-box;
        @include text-ellipsis();
      }
    }
  }
}