@import "@servicensw/constants/custom-media.css";

/**
 * @servicensw/notice
 *
 * .notice--error - Error
 * .notice--warning - Warning
 * .notice--success - Success
 * .notice--info - Info
 * .notice--plain - Plain (without icon)
 *
 * Markup: notice.twig
 *
 * Style guide: notice
 */

.notice {
  border-inline-start: 4px solid var(--notice-border, var(--info-blue));
  background: var(--notice-bg, var(--info-blue-light))
    svg-load("./images/notice-icon.svg") no-repeat 20px 24px;
  padding-block: var(--spacing-m);
  padding-inline-end: var(--spacing-m);
  padding-inline-start: 56px;
  margin-block: var(--spacing-s);
  position: relative;
  display: grid;
  gap: 0.5rem;

  @media print {
    background: none !important;
    padding-block: var(--spacing-s);
    padding-inline-start: var(--spacing-m);
  }

  /* Spacing changes globally at medium down, so we need to reposition the icon */
  @media (--medium-down) {
    background-position: 12px 16px;
  }

  /* Some notices require a div around the content */
  & > div:only-child:where(:not(.contextual)) {
    display: grid;
    gap: 0.5rem;
  }

  & :is(ul, ol):where(:not(.contextual-links)) {
    display: grid;
    gap: 0.25rem;

    & li::after {
      display: none;
    }

    & a {
      font-weight: 700;
    }
  }

  & :is(h2, h3, li, ol, ul, p) {
    max-inline-size: 100%;
    margin-block: 0;
  }

  & :is(h2, h3, .notice__title) {
    font-size: var(--font-size-m);
    line-height: var(--line-height);
    font-weight: bold;
  }
}

[dir="rtl"] .notice,
.translated-rtl .notice {
  background-position: top 24px right 20px;

  @media (--medium-down) {
    background-position: top 12px right 16px;
  }
}

.notice--plain {
  background-image: none;
}

.notice--error {
  --notice-bg: var(--error-red-light);
  --notice-border: var(--error-red);

  background-image: svg-load("./images/notice-error-icon.svg");
}

.notice--warning {
  --notice-bg: var(--warning-orange-light);
  --notice-border: var(--warning-orange);

  background-image: svg-load("./images/notice-warning-icon.svg");
}

:is(.notice--status, .notice--success) {
  --notice-bg: var(--success-green-light);
  --notice-border: var(--success-green);

  background-image: svg-load("./images/notice-success-icon.svg");
}

/**
 * Wrapper for notices to be used in page.
 */

.page-notices {
  & .notice {
    margin-block-end: 0;
  }
}

.page-section {
  & .notice {
    max-inline-size: var(--line-length);
  }
}

/**
 * Sitewide notice
 *
 * Markup: sitewide-notice.twig
 *
 * Style guide: notice.sitewide
 */

.sitewide-notice {
  display: none;
  padding-block: 1rem;
  background: var(--white);

  @media print {
    display: none !important;
  }

  & a {
    color: var(--text-black);
  }

  & .container {
    padding-inline-end: 50px;
    position: relative;
  }

  & .container * {
    margin: 0;
    max-inline-size: none;
  }

  & p + p {
    margin-block-start: 1rem;
  }

  & :focus,
  & :focus-visible {
    outline: 2px solid var(--text-black);
  }

  & :focus:not(:focus-visible) {
    outline: none;
  }
}

.sitewide-notice.is-excluded,
.sitewide-notice--open {
  display: block;
}

.sitewide-notice__close {
  position: absolute;
  background: svg-load("./images/notice-close.svg") no-repeat center;
  inline-size: var(--touch-target-size);
  block-size: var(--touch-target-size);
  inset-block-start: 50%;
  transform: translateY(-50%);
  inset-inline-end: calc(var(--container-padding) - 1rem);
  border: 0;
  padding: 0;
  cursor: pointer;
}

/**
 * Sitewide alert
 *
 * Markup: sitewide-notice-alert.twig
 *
 * Style guide: notice.sitewide.alert
 */

.sitewide-notice--alert {
  background: #ffd34c;
}

/**
 * Sitewide notice with background
 *
 * Markup: sitewide-notice-background.twig
 *
 * Style guide: notice.sitewide.bg
 */

.sitewide-notice--image {
  position: relative;
  color: var(--text-white);
  background: #000;

  & a {
    color: var(--text-white);
  }

  & :focus,
  & :focus-visible {
    outline: 2px solid var(--text-white);
  }

  & :focus:not(:focus-visible) {
    outline: none;
  }

  & .sitewide-notice__close {
    background-image: svg-load("./images/notice-close.svg", fill: #fff);
  }
}

.sitewide-notice__background {
  & img {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.35;
  }
}

.sitewide-notice--important {
  padding-block-start: 1.5rem;
  padding-block-end: 1.5rem;

  @media (--small-down) {
    padding-block-start: 1rem;
    padding-block-end: 1rem;
  }
}

@media (--small-down) {
  .sitewide-notice__message-small {
    display: block;
  }

  .sitewide-notice__message-large {
    display: none;
  }
}

@media (--small-up) {
  .sitewide-notice__message-small {
    display: none;
  }
}

/**
 * How to use
 *
 * #### Installation
 *
 * ```
 * npm install @servicensw/notice --save-dev
 * ```
 *
 * #### CSS
 *
 * * PostCSS workflow: `@import '@servicensw/notice';`
 * * Sass/Eyeglass: `@import 'servicensw-notice';`
 * * Native CSS: `@import url('dist/notice.css');`
 * * Link tag: `<link href="dist/notice.css" rel="stylesheet" type="text/css">`
 *
 * Style guide: notice.usage
 */