@import "./../../style-config/colors";
@import "./../../style-config/z-index";

$message-border: 1px solid !default;
$message-border-radius: 3px !default;
$message-width: 300px !default;

.carbon-message {
  position: relative;
}

.carbon-message--border {
  border: $message-border;
}

.carbon-message--rounded {
  border-radius: $message-border-radius;
}

.carbon-message__type {
  display: flex;
  height: 100%;
  margin-top: 0;
  position: absolute;
  width: 30px;
  text-align: center;

  .carbon-icon__svg {
    height: 24px;
    margin-top: -12px;
    width: 30px;

    .carbon-icon__svg-group {
      fill: $white;
    }
  }
}

.carbon-message__type--rounded {
  border-radius: $message-border-radius 0 0 $message-border-radius;
}

.carbon-message__type-icon {
  margin: auto;

  &:before {
    color: $white;
    display: block;
    font-size: 16px;
  }
}

.carbon-message__close {
  cursor: pointer;
  display: flex;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 45px;

  &:before {
    font-size: 16px;
    margin: auto;
  }
}

.carbon-message__content {
  padding: 15px 50px;
  white-space: pre-wrap;
}

.carbon-message__title {
  font-weight: bold;
}

@mixin message-theme($type, $color, $border, $background, $color-hover) {
  .carbon-message--#{$type} {
    background-color: $background;

    .carbon-message__type {
      background-color: $color;
    }

    .carbon-message__title {
      color: $color;
      margin-bottom: 3px;
    }

    .carbon-message__close {
      color: $color;
    }

    &.carbon-message--border {
      border-color: $border;
    }
  }

  .carbon-message--#{$type}.carbon-message--transparent {
    background-color: transparent;
    border: none;
    margin-bottom: 0px;

    .carbon-message__content{
      padding: 2px 5px 2px 35px;
    }

    .carbon-message__type {
      background-color: transparent;

      .carbon-icon__svg {
        .carbon-icon__svg-group {
          fill: $color;
        }
      }

      .carbon-message__type-icon {
        top: 8px;
        &:before {
          color: $color;
        }
      }
    }

    .carbon-message__close{
      top: 8px;
    }
  }

  .carbon-message--#{$type}.carbon-message--transparent.carbon-message--dismissable {
    .carbon-message__content{
      padding: 2px 35px;
    }
  }
}


@each $set in $colorIconSets {
  @include message-theme($set...);
}