@import "./variables";

.f-response-bar {
  color: white;
  border-radius: $borderRadiusBase * 2;
  padding: 1rem 1rem 1rem 2rem;
  display: flex;
  align-items: center;
  margin-top: $spacer + 0.5rem;
  margin-bottom: $spacer + 0.5rem;
  position: relative;
  width: 100%;
  &:before {
    content: "";
    width: 20px;
    min-width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    box-shadow: 0 0 0 5px rgba(white, 0.25);
  }
  &:after {
    content: "";
    width: 10px;
    height: 100%;
    background: rgba(white, 0.25);
    border-radius: 10px 0 0 10px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
  }
  &.f-variant-success {
    background: #1ad528;
    &:before {
      background-size: 10px;
      background: rgba(white, 0.2) url("../images/f-icons/f-icon-check.svg") center center no-repeat;
    }
  }
  &.f-variant-error {
    background: #d51a52;
    &:before {
      background: rgba(white, 0.2) url("../images/f-icons/f-icon-close.svg") center center no-repeat;
      background-size: 8px;
    }
  }
  .icon-close {
    cursor: pointer;
  }
  span {
    margin-left: 2rem;
    font-weight: 700;
    width: 100%;
  }
}