@state-smarttip-text:             @color-blue-100;
@state-smarttip-bg:               @color-gray-160;
@state-smarttip-border:           1px dashed @color-gray-100;

@alert-smarttip-bg:               @state-smarttip-bg;
@alert-smarttip-border:           @state-smarttip-border;
@alert-smarttip-text:             @state-smarttip-text;
@alert-smarttip-icon-color:       @color-smarttip;
@alert-smarttip-icon-close-color: @color-smarttip;
        
.alert-smarttip {
    .alert-variant(@alert-smarttip-bg;
    @alert-smarttip-text;
    @alert-smarttip-icon-color;
    @alert-smarttip-icon-close-color;
    @alert-smarttip-border
    );
    border-radius: @border-radius-xlarge;
    z-index: (@zindex-alert - 1);
    width: 100%;
    overflow: hidden;

    .header {
        font-family: @headings-font-family;
        font-weight: @headings-font-weight;
        font-size: @font-size-large;
        color: @color-blue-70;
        margin-bottom: @margin-base; 
    }
}

.smarttip-collapsed {
    margin-bottom: @margin-base;
}