//
// Notification
//

@notification-border-radius: @panel-border-radius;
@notification-box-shadow: none;
@notification-font-size: @font-size-sm;
@notification-font-weight: @font-weight-normal;
@notification-padding: @pad-xs;

@notification-success-background-color: mix(@background-color, @color-success, 80%);
@notification-success-border-color: mix(@background-color, @color-success, 70%);
@notification-success-text-color: @text-color;
@notification-success-link-color: mix(@text-color, @color-success, 45%);

// Yellow warning color mixes particularly bad with darker colors, hence additional checks
@notification-warn-background-color: .bg-luma-checker(tint(@_color-warn, 80%), @background-color)[@result];
@notification-warn-border-color: .bg-luma-checker(tint(@_color-warn, 70%), @tinymce-separator-color)[@result];
@notification-warn-text-color: .bg-luma-checker(@text-color, mix(@text-color, @_color-warn, 70%))[@result];
@notification-warn-link-color: .bg-luma-checker(mix(@text-color, @_color-warn, 60%), @_color-warn)[@result];

@notification-error-background-color: mix(@background-color, @color-error, 80%);
@notification-error-border-color: mix(@background-color, @color-error, 70%);
@notification-error-text-color: @text-color;
@notification-error-link-color: mix(@text-color, @color-error, 50%);

@notification-info-background-color: mix(@background-color, @_color-info, 80%);
@notification-info-border-color: mix(@background-color, @_color-info, 70%);
@notification-info-text-color: @text-color;
@notification-info-link-color: mix(@text-color, @_color-info, 40%);

// Private variables
@_color-warn: #ffcc00;
@_color-info: #3087eb;

.tox {
  // Wraps around many notifications
  .tox-notifications-container {
    //
  }

  // An individual notification
  .tox-notification {
    border-radius: @notification-border-radius;
    border-style: solid;
    border-width: 1px;
    box-shadow: @notification-box-shadow;
    box-sizing: border-box;
    display: grid;
    font-size: @notification-font-size;
    font-weight: @notification-font-weight;
    grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr);
    margin-top: @pad-xs;
    opacity: 0;
    padding: @notification-padding;
    transition: transform 100ms ease-in, opacity 150ms ease-in;

    p {
      font-size: @notification-font-size;
      font-weight: @notification-font-weight;
    }

    a {
      cursor: pointer;
      text-decoration: underline;
    }
  }

  .tox-notification--in {
    opacity: 1;
  }

  .tox-notification--success {
    background-color: @notification-success-background-color;
    border-color: @notification-success-border-color;
    color: @notification-success-text-color;

    p {
      color: @notification-success-text-color;
    }

    a {
      color: @notification-success-link-color;
    }

    svg {
      fill: @notification-success-text-color;
    }
  }

  .tox-notification--error {
    background-color: @notification-error-background-color;
    border-color: @notification-error-border-color;
    color: @notification-error-text-color;

    p {
      color: @notification-error-text-color;
    }

    a {
      color: @notification-error-link-color;
    }

    svg {
      fill: @notification-error-text-color;
    }
  }

  .tox-notification--warn,
  .tox-notification--warning {
    background-color: @notification-warn-background-color;
    border-color: @notification-warn-border-color;
    color: @notification-warn-text-color;

    p {
      color: @notification-warn-text-color;
    }

    a {
      color: @notification-warn-link-color;
    }

    svg {
      fill: @notification-warn-text-color;
    }
  }

  .tox-notification--info {
    background-color: @notification-info-background-color;
    border-color: @notification-info-border-color;
    color: @notification-info-text-color;

    p {
      color: @notification-info-text-color;
    }

    a {
      color: @notification-info-link-color;
    }

    svg {
      fill: @notification-info-text-color;
    }
  }

  // Content within the notification
  .tox-notification__body {
    align-self: center;
    color: @text-color;
    font-size: 14px;
    grid-column-end: 3;
    grid-column-start: 2;
    grid-row-end: 2;
    grid-row-start: 1;
    text-align: center;
    white-space: normal;
    word-break: break-all;
    word-break: break-word;
  }

  .tox-notification__body > * {
    margin: 0;
  }

  .tox-notification__body > * + * {
    margin-top: 1rem;
  }

  .tox-notification-inner a {
    //
  }

  .tox-notification__icon {
    align-self: center;
    grid-column-end: 2;
    grid-column-start: 1;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: end;
  }

  .tox-notification__icon svg {
    display: block;
  }

  .tox-notification__dismiss {
    align-self: start;
    grid-column-end: 4;
    grid-column-start: 3;
    grid-row-end: 2;
    grid-row-start: 1;
    justify-self: end;
  }

  .tox-notification .tox-progress-bar {
    grid-column-end: 4;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-row-start: 2;
    justify-self: center;
  }
}