///////////////////////////////
// THEME / COMPONENTS / NOTICES
///////////////////////////////


@use "sass:meta";

@use "../variables/" as var;


@layer components {

  @include meta.load-css("@dcf/scss/components-js/notices");


  // Add a little vertical space between notice heading and message
  .unl .dcf-notice-message {
    margin-top: #{var.$ms-12}em;
  }


  // Ensure heading and close link (all states) display as cream
  // .unl .dcf-notice h1, // An <h1> shouldn't be used at this level.
  .unl .dcf-notice h2,
  .unl .dcf-notice h3,
  .unl .dcf-notice h4,
  .unl .dcf-notice h5,
  .unl .dcf-notice h6,
  .unl .dcf-notice-message a:link,
  .unl .dcf-notice-message a:visited,
  .unl .dcf-notice-message a:hover,
  .unl .dcf-notice-message a:active,
  .unl .dcf-notice-message a {
    color: var.$cream;
  }


  // Set notice box drop shadows for light mode (or no preference)
  @media (prefers-color-scheme: light) or (prefers-color-scheme: no-preference) {

    // Info
    .unl .dcf-notice-info {
      // https://meyerweb.com/eric/tools/color-blend/#007197:242423:1:hex
      filter:
              drop-shadow(1px 2px 2px rgba(18,75,93,.25))
              drop-shadow(2px 4px 4px rgba(18,75,93,.25))
              drop-shadow(3px 6px 6px rgba(18,75,93,.25));
    }


    // Success
    .unl .dcf-notice-success {
      // https://meyerweb.com/eric/tools/color-blend/#00784E:242423:1:hex
      filter:
              drop-shadow(1px 2px 2px rgba(18,78,57,.25))
              drop-shadow(2px 4px 4px rgba(18,78,57,.25))
              drop-shadow(3px 6px 6px rgba(18,78,57,.25));
    }


    // Warning
    .unl .dcf-notice-warning {
      // https://meyerweb.com/eric/tools/color-blend/#E72C0C:242423:1:hex
      filter:
              drop-shadow(1px 2px 2px rgba(125,50,36,.25))
              drop-shadow(2px 4px 4px rgba(125,50,36,.25))
              drop-shadow(3px 6px 6px rgba(125,50,36,.25));
    }


    // Danger
    .unl .dcf-notice-danger {
      // https://meyerweb.com/eric/tools/color-blend/#9D0000:242423:1:hex
      filter:
              drop-shadow(1px 2px 2px rgba(97,18,18,.25))
              drop-shadow(2px 4px 4px rgba(97,18,18,.25))
              drop-shadow(3px 6px 6px rgba(97,18,18,.25));
    }

  }

}