@use 'pix-design-tokens/fonts';

.c-notification.notification {
  color: var(--pix-neutral-800);
  font-weight: 500;
  font-size: 1rem;
  font-family: fonts.$font-roboto;
  line-height: 1.3125rem;
  border: 1.5px solid var(--pix-neutral-500);
  border-radius: 6px;

  > div:first-child {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--pix-neutral-500);
  }

  > div:nth-child(2) {
    align-items: center;
    padding: 8px 12px;
    background-color: var(--pix-neutral-20);

    > div {
      align-self: center;
      padding-right: 0;
      background-color: inherit;
    }
  }

  a {
    color: var(--pix-neutral-800);
  }

  .fa {
    font-size: 1.375rem;
  }

  .fa-exclamation-circle {
    color: var(--pix-neutral-0);
  }

  .c-notification__close svg {
    fill: var(--pix-neutral-500);

    &:hover,
    &:active {
      fill: var(--pix-neutral-800);
    }
  }

  &--error {
    border: 1.5px solid var(--pix-error-700);

    div:first-child {
      background-color: var(--pix-error-700);
    }

    div:nth-child(2) {
      color: var(--pix-error-700);
      background-color: var(--pix-error-50);
    }

    .c-notification__close svg {
      fill: var(--pix-error-700);

      &:hover,
      &:active {
        fill: var(--pix-error-900);
      }
    }
  }

  &--warning {
    border: 1.5px solid var(--pix-warning-700);

    div:first-child {
      background-color: var(--pix-warning-700);
    }

    div:nth-child(2) {
      color: var(--pix-warning-700);
      background-color: var(--pix-warning-50);
    }

    .c-notification__close svg {
      fill: var(--pix-warning-700);

      &:hover,
      &:active {
        fill: var(--pix-warning-900);
      }
    }
  }

  &--success {
    border: 1.5px solid var(--pix-success-700);

    div:first-child {
      background-color: var(--pix-success-700);
    }

    div:nth-child(2) {
      color: var(--pix-success-700);
      background-color: var(--pix-success-50);
    }

    .c-notification__close svg {
      fill: var(--pix-success-700);

      &:hover,
      &:active {
        fill: var(--pix-success-900);
      }
    }
  }
}

.alert-input {
  position: relative;
  margin-top: -5px;
  margin-bottom: 5px;
  font-size: 0.75rem;
  text-align: right;

  &--error {
    color: var(--pix-error-700);
  }

  &--left {
    margin-top: 5px;
    text-align: left;
  }
}
