//
// Copyright (c) Tiny Technologies, Inc. All rights reserved.
// Licensed under the LGPL or a commercial license.
// For LGPL see License.txt in the project root for license information.
// For commercial licenses see https://www.tiny.cloud/
//

//
// 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: tint(@color-success, 80%);
@notification-success-border-color: tint(@color-success, 70%);
@notification-success-text-color: @text-color;
@notification-success-link-color: shade(@color-success, 30%);

@notification-warn-background-color: #fffaea;
@notification-warn-border-color: darken(@notification-warn-background-color, 15%);
@notification-warn-text-color: @text-color;
@notification-warn-link-color: @text-color;

@notification-error-background-color: tint(@color-error, 87%);
@notification-error-border-color: tint(@color-error, 75%);
@notification-error-text-color: @text-color;
@notification-error-link-color: @color-error;

@notification-info-background-color: #d9edf7;
@notification-info-border-color: #779ecb;
@notification-info-text-color: @text-color;
@notification-info-link-color: @text-color;

.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 {
      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: @color-error;
    }

    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;
  }
}