@import '../styles/_colors';

.vui-feedback{
  box-sizing:border-box;
  padding:16px;
  margin-bottom:20px;
  line-height:1.4;
  position:relative;

  &-closebtn{
    position:absolute;
    top:10px;
    right:10px;
    border:none;
    background:transparent;
    overflow:hidden;
    margin:0;
    padding:0;
    cursor:pointer;
    line-height:0;

    svg{
      width:15px;
      height:15px;
      opacity: 0.2;
    }
  }

  &-content{
    box-sizing: border-box;
  }

  &[data-canclose='true']{
    .vui-feedback-content{
      padding-right: 15px;
    }
    .vui-feedback-closebtn{
      display:block;
    }
  }

  &[data-type='success']{
    color:base-color(land-green-darkest);
    background-color:base-color(land-green-lightest);
  }
  &[data-type='info']{
    color:base-color(dark-blue);
    background-color:base-color(sky-blue);
  }
  &[data-type='warning']{
    color:base-color(yellow-darkest);
    background-color:base-color(yellow-lightest);
  }
  &[data-type='danger']{
    color:base-color(red-darkest);
    background-color:base-color(red-lightest);
  }
}