.page-notice {
  background-color: var(--theme-tenth-opacity-color);
  border-left: 0.25rem solid var(--theme-color);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  transition: ease-in-out;
  margin-bottom: 1rem;

  &:has(.page-notice-header > :only-child:is(svg)), &:has(.page-notice-header > :only-child:is(i)) {
    align-items: center;
    flex-direction: row;
  }
}

.page-notice-header {
  justify-content: space-between;
}

.page-notice-notice {
  background-color: var(--blue-lightest);
  border-color: var(--blue);
}

.page-notice-success {
  background-color: var(--success-lightest);
  border-color: var(--success);
}

.page-notice-warning {
  background-color: var(--warning-lightest);
  border-color: var(--warning);
}

.dashboard__notice.notice p.notice__message {
  font-size: 0.875rem;
}

.notice {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex: 1;
  flex-direction: column;
  padding: 1rem;
  width: 100%;
  --notice-color: var(--theme-color-darker);
  --notice-sub-color: var(--ink);

  &.notice--simple {
    padding: 0;
  }

  /* MODIFIER I: Alignment (Default is center) */
  &.notice--left {
    align-items: flex-start;

    .notice__header {
      text-align: left;
    }
  }

  &.notice--right {
    align-items: flex-end;

    .notice__header {
      text-align: right;
    }
  }

  /* MODIFIER II: Notice Status */
  &.notice--no-data {
    --notice-color: var(--ink-gray);
    --notice-sub-color: var(--ink-gray)
  }

  &.notice--not-found {
    --notice-color: var(--yellow-darker);
    --notice-sub-color: var(--ink)
  }

  .notice__graphic {
    --notice-graphic-size: 120px;
    margin-bottom: 0.5rem;

    svg {
      fill: color-mix(in srgb, var(--notice-color), white 90%);
      width: var(--notice-graphic-size);
    }

    &.notice__graphic--sm {
      --notice-graphic-size: 48px;
    }

    &.notice__graphic--lg {
      --notice-graphic-size: 288px;
    }

    &.notice__graphic--survey {
      margin-left: 2rem;
    }

    &.notice--theme {
      --notice-color: var(--theme-color);
      --notice-sub-color: var(--ink);

      svg {
        fill: var(--notice-color);
        width: var(--notice-graphic-size);
      }
    }
  }

  .notice__header {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
  }

  .notice__title {
    color: var(--notice-color);
  }

  .notice__message {
    color: var(--notice-sub-color);
  }

  .notice__actions {
    margin-top: 1.75rem;
  }
}

details {
  text-decoration: none;
  width: 100%;

  & > ::-webkit-details-marker, > ::marker { /* Hide caret on Safari */
    font-size: 0 !important;
  }

  &.details-left summary {
    justify-content: flex-start;
    width: 100%;
  }

  summary {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 0.25rem;
  }

  &.read-more {
    margin: 1rem auto;
    width: 100%;

    p {
      text-align: left;
      margin-bottom: 0.5rem;
    }

    summary {
      justify-content: flex-start;
      margin-bottom: 0.5rem;
      width: 100%;

      span {
        font-weight: 600;
        margin: 0;
        text-align: left;

        &::after {
          color: var(--theme-color-darker);
          content: " Read more...";
          white-space: nowrap;

          &:hover {
            color: var(--theme-color-darker);
          }
        }
      }
    }
    &[open] summary span::after { /* When details is open */
    content: " Read less...";
    }
  }
}

.notice__coming-soon {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  width: 100%;

  &.notice--top {
    justify-content: flex-start;
  }

  &.notice--center {
    justify-content: center;
  }

  &.notice--top {
    justify-content: flex-end;
  }
}