@import url('../tools/x-link.css');
@import url("../components/c-button.selectors.css");


/* Elements */

/* To prevent excess space at top and bottom of message */

@define-mixin message {
  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child {
    margin-bottom: 0;
  }
}



/* Modifiers */

/* Modifiers: Scope-Inline & Type-* */

@define-mixin message--scope-inline {
  & > * {
    display: inline;
  }

  /* IMPORTANT: Inline message has icon by default */
  @mixin message--has-icon;
  &::before {
    margin-right: 0.5ch;

    color: var(--icon-color);
  }
}
@define-mixin message--type-info---message--scope-inline {
  /* no common styles */
}
@define-mixin message--type-success---message--scope-inline {
  /* no common styles */
}
@define-mixin message--type-warning---message--scope-inline {
  /* no common styles */
}
@define-mixin message--type-error---message--scope-inline {
  color: var(--global-color-danger--dark);
}
@define-mixin message--type-extra---message--scope-inline {
  /* no common styles */
}

/* Modifiers: Scope-Section & Type-* */

@define-mixin message--scope-section {
  border-width: var(--global-border-width--normal);
  border-style: solid;

  padding-block: 8px;
  padding-inline: 12px;
}
@define-mixin message--type-info---message--scope-section {
  background-color: var(--global-color-info--x-light);
  border-color: var(--global-color-info--normal);
}
@define-mixin message--type-success---message--scope-section {
  background-color: var(--global-color-success--x-light);
  border-color: var(--global-color-success--x-dark);
}
@define-mixin message--type-warning---message--scope-section {
  background-color: var(--global-color-warning--x-light);
  border-color: var(--global-color-warning--dark);
}
@define-mixin message--type-error---message--scope-section {
  background-color: var(--global-color-danger--x-light);
  border-color: var(--global-color-danger--dark);
}
@define-mixin message--type-extra---message--scope-section {
  background-color: var(--global-color-extra--x-light);
  border-color: var(--global-color-extra--normal);
}

/* Modifiers: Scope-Global */

@define-mixin message--scope-global {
  color: var(--global-color-primary--xx-light);
  background-color: var(--global-color-accent--secondary);
  border-color: var(--global-color-primary--dark);

  padding-block: 8px;
  padding-inline: 12px;

  border-width: 0;
  text-align: center;

  & :is(a, :--c-button--as-link) {
    /* To distinguish link from message text */
    & {
      @mixin link--irregular;
    }
    &:hover {
      @mixin link--irregular--hover;
    }
    &:active {
      @mixin link--irregular--active;
    }

    /* To avoid clash of link color with message color */
    &:is(*, :hover, :active) {
      color: inherit;
    }
  }
}

/* Modifiers: Icon */

@define-mixin message--has-icon {
  &::before {
    font-family: var(--icon);
  }
}

/* IMPORTANT: Inline message has icon by default */

/* IMPORTANT: Section message NO icon by default */
@define-mixin message--has-icon---message--scope-section {
  --icon-block-width: 32px;
  --icon-size: 16px;

  position: relative;
  border-left-width: var(--icon-block-width);

  &::before {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--icon-block-width);
    left: calc( -1 * var(--icon-block-width));
    margin-left: var(--global-border-width--normal);

    color: var(--global-color-primary--xx-light);
    font-size: var(--icon-size);

    /* To take up left column */
    grid-row: 1 / span 99; /* 99 is for arbitrary implicit row count */

    /* To center content */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* NOTE: Client is expected to overwrite these */
@define-mixin message--has-icon---message--type-info {
  --icon-color: var(--global-color-info--normal);

  &::before { content: "✎"; }
}
@define-mixin message--has-icon---message--type-success {
  --icon-color: var(--global-color-success--x-dark);

  &::before { content: "✓"; }
}
@define-mixin message--has-icon---message--type-warning {
  --icon-color: var(--global-color-warning--dark);

  &::before { content: "⚠"; }
}
@define-mixin message--has-icon---message--type-error {
  --icon-color: var(--global-color-danger--dark);

  &::before { content: "⚠"; }
}
@define-mixin message--has-icon---message--type-extra {
  --icon-color: var(--global-color-extra--normal);

  &::before { content: "✎"; }
}