@use "sass:color";
/*#############################################################################
# STEPS
#############################################################################*/


.panel {
  font-size: rem-calc(13px);
  margin: 30px 0;
  padding: 10px 20px;
  position: relative;
  @include border-radius(6px);

  &.has-icon {
    padding-left: 60px;

    img.icon {
      position: absolute;
      left: 20px;
      top: 50%;
      @include transform(translateY(-50%));
    }
  }

  & :last-child {
    margin: 0;
  }

  // States

  &.success {
    background-color: $color-success-light;
  }

  &.info {
    background-color: #E4E4FF;
  }

  &.alert {
    background-color: #ff90ab;
    color: #721c24;
  }

  &.warning {
    background-color: #ffffab;
  }

  &.primary-dark {
    background-color: color.adjust(color.adjust($color-primary, $lightness: -40%), $saturation: -60%);
    color: white;
  }
}