@layer components {
  /*
   * Set item — Message
   */
  
  .set-message {
    align-items: center;
    border-radius: 0.5rem;
    display: inline-flex;
    flex-wrap: nowrap;
    padding: 0.25rem 0.75rem;
    line-height: 1.25;
    max-width: 36rem;
    text-align: center;
    vertical-align: baseline;
  
    @media (max-width: 991.98px) {
      font-size: 0.938rem;
      max-width: 80%;
    }
  
    @media (max-width: 639.98px) {
      font-size: 0.875rem;
    }
  
    .set-message-icon {
      font-size: 0.75rem;
      margin-right: 0.5rem;
    }
  
    &:empty {
      display: none;
    }
  }
  
  .set-message-info {
    background-color: rgb(var(--rgb-amber) / 0.12);
    color: var(--color-amber-darker);
  }
  
  .set-message-success {
    background-color: rgb(var(--rgb-green) / 0.12);
    color: var(--color-green-darker);
  }
  
  .set-message-warning {
    background-color: rgb(var(--rgb-red) / 0.12);
    color: var(--color-red-darker);
  }
}