.ca-feedback {
  $block: &;
  
  display: flex;
  padding: rem-calc(14px) $px12 rem-calc(14px) rem-calc(18px);
  border-radius: rem-calc(4px);
  background-color: $c-info;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
  text-align: left;

  &::before {
    content: '';
    display: block;
    opacity: 0.96;
    background-color: $c-white;
    width: calc(100% - #{rem-calc(6px)});
    height: 100%;
    position: absolute;
    inset: 0 0 0 6px;
    z-index: 1;
  }

  &__icon {
    z-index: 2;
    flex-shrink: 0;
    font-size: 17px;
    margin-right: $px10;
    color: $c-info;
  }

  &__message {
    z-index: 2;
    margin: 0 $px10 0 0;
    font-size: $font-size-s;
    color: var(--body-text-color, $c-text-primary);
  }

  &__close {
    z-index: 2;
    flex-shrink: 0;
    margin-left: auto;
    line-height: 0;
  }

  &--success {
    background-color: $c-success;
    
    #{$block}__icon {
      color: $c-success;
    }
  }

  &--error {
    background-color: $c-error;
    
    #{$block}__icon {
      color: $c-error;
    }
  }
}