@import url('../../globals.module.css');

.message {
  background: var(--color-tan);
  color: var(--color-black);
  margin: var(--spacing-margin) 0;
  box-shadow: 0 0 1rem color(var(--color-black) alpha(0.7));
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  & h2 {
    display: inline-block;
    padding: var(--spacing-margin);
    line-height: 2.8rem;
    margin: 0;
  }

  & svg {
    padding: var(--spacing-margin);
    height: 2.8rem;
    width: 2.8rem;
    vertical-align: bottom;
  }

  & button {
    padding: 0;
    margin: 0;
    border: 0 none;
    background: transparent;
    color: var(--color-tan);
    cursor: pointer;
    float: right;
    font-size: 0;

    &:hover,
    &:active {
      color: var(--color-white);
    }
  }
}

.content {
  padding: var(--spacing-margin);
  overflow: auto;

  & p {
    margin-top: 0;
    margin-bottom: var(--spacing-margin);
  }

  & p:last-child {
    margin-bottom: 0;
  }
}

.error {
  & .header {
    background: var(--color-red);
    color: var(--color-white);

    & svg {
      background: var(--color-white);
      color: var(--color-red);
    }
  }
}

.warning {
  & .header {
    background: var(--color-orange);

    & > svg {
      background: var(--color-black);
      color: var(--color-orange);
    }
  }
}

.info {
  & .header {
    background: var(--color-blue);
    color: var(--color-white);

    & > svg {
      background: var(--color-white);
      color: var(--color-blue);
    }
  }
}