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

.x-message-container {
  @include reset-component();
  
  position: fixed;
  top: 16px;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 0;
}

.x-message-wrapper {
  flex-shrink: 0;
  box-shadow: $box-shadow-base;
  margin-bottom: $margin-xs;
}

.x-message {
  display: flex;
  align-items: center;
  background: $message-bg;
  padding: $padding-xs 20px;
  border: $border-base;
  border-width: 1px;

  &-info {
    color: $primary-color;
  }
  &-success {
    color: $success-color;
  }
  &-error {
    color: $error-color;
  }
  &-warning {
    color: $warning-color;
  }
  &-loading {
    color: $primary-color;
  }
  
  &_icon {
    margin-right: $margin-xs;
  }

  &_content {
    display: flex;
    align-items: center;
  }

  &_close {
    display: flex;
    align-items: center;
    margin-left: $margin-xss;
  }
}