.yith-plugin-fw__notice {
  --yith-fw-notice-bg: #f2f7ff;
  --yith-fw-notice-icon: '\e90e';
  --yith-fw-notice-border-color: #d2dbea;
  --yith-fw-notice-color: #4361c4;

  &.yith-plugin-fw__notice--success {
    --yith-fw-notice-bg: #f7fbe9;
    --yith-fw-notice-icon: '\e921';
    --yith-fw-notice-border-color: #d7e0b0;
    --yith-fw-notice-color: #6e861d;
  }

  &.yith-plugin-fw__notice--warning {
    --yith-fw-notice-bg: #fef5ea;
    --yith-fw-notice-icon: '\e923';
    --yith-fw-notice-border-color: #e2cbb0;
    --yith-fw-notice-color: #b86e16;
  }

  &.yith-plugin-fw__notice--error {
    --yith-fw-notice-bg: #fff3f1;
    --yith-fw-notice-icon: '\e923';
    --yith-fw-notice-border-color: #dbbcb7;
    --yith-fw-notice-color: #a91803;
  }

  position: relative;
  padding: 15px 40px 15px 45px;
  margin: 15px 0 20px;
  border-radius: 6px;
  background: var(--yith-fw-notice-bg);
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: var(--yith-fw-notice-color);
  border: 1px solid var(--yith-fw-notice-border-color);

  a {
    color: inherit;
    font-weight: 500;
  }

  &:before {
    font-family: yith-icon;
    content: var(--yith-fw-notice-icon);
    position: absolute;
    top: 50%;
    left: 13px;
    font-size: 20px;
    font-weight: 400;
    transform: translateY(-50%);
  }

  .yith-plugin-fw__notice__dismiss {
    cursor: pointer;
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);

    &:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border-radius: 50%;
      opacity: 0;
      box-shadow: 0 0 0 5px;
      background: currentColor;
      transition: all .3s ease-in-out;
    }

    &:after {
      position: absolute;
      top: 50%;
      left: 50%;
      font-family: 'yith-icon';
      content: '\f117';
      font-size: 12px;
      transform: translateY(-50%) translateX(-50%);
    }

    &:hover:before {
      box-shadow: 0 0 0 0;
      opacity: .1;
    }

    &:hover:after, &:active:after, &:focus:after {
      color: inherit;
    }
  }
}