@keyframes lbaic-settings-notification-show {
  0% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes lbaic-settings-notification-hide {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
}

.lbaic-settings-notification {
  &-layout {
    position: absolute;
    top: 86px;
    right: 8px;
    height: max-content;
    max-height: 200px;
    z-index: 1000001;
    user-select: text;
    padding-right: 8px;
    padding-top: 8px;

    .lbaic-settings-button-reset {
      pointer-events: all;
    }

    @include min-width($lbaic-settings-wp-breakpoint) {
      top: unset;
      left: 24px;
      right: unset;
      bottom: var(--content-bottom-offset, 16px);
      max-height: calc(100dvh - var(--nav-height-offset) - var(--content-bottom-offset) - 60px);
    }
  }

  & {
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    pointer-events: none;
  }

  &-item {
    width: 233px;
    padding: 12px 8px;
    border-top: 4px solid var(--lbaic-settings-notification-border);
    background-color: var(--lbaic-settings-notification-bg);
    border-radius: 10px;
    box-shadow: var(--lbaic-settings-notification-shadow);
    animation: lbaic-settings-notification-show 600ms forwards;

    &:not(:last-child) {
      margin-block-start: 8px;
    }

    &:last-child {
      margin-block-start: auto;
    }

    &.success {
      --lbaic-settings-notification-border: var(--lbaic-settings-notification-success);
      --lbaic-settings-notification-i-fill: var(--lbaic-settings-notification-success);
    }

    &.warning {
      --lbaic-settings-notification-border: var(--lbaic-settings-notification-warning);
      --lbaic-settings-notification-i-fill: var(--lbaic-settings-notification-warning);
    }

    &.error {
      --lbaic-settings-notification-border: var(--lbaic-settings-notification-error);
      --lbaic-settings-notification-i-fill: var(--lbaic-settings-notification-error);
    }
  }

  &-header {
    display: flex;
    align-items: flex-start;
  }

  &-status {
    width: 16px;
    flex: 0 0 16px;
    display: block;
    margin-inline-end: 8px;
    fill: var(--lbaic-settings-notification-i-fill);
  }

  &-title {
    flex: 1 0 0;

    &-in {
      display: block;
      font-size: var(--lbaic-settings-fs-13);
      font-weight: 400;
      color: var(--lbaic-settings-notification-title-color);
      line-height: normal;
      white-space: pre-wrap;
      word-break: break-word;
      & > a {
        padding-inline-end: 20px;
        align-items: center;
        font-size: var(--lbaic-settings-fs-13);
        font-weight: 400;
        color: var(--lbaic-settings-notification-title-color);
        line-height: normal;
        text-decoration: none;
        white-space: pre-wrap;
        pointer-events: stroke;

        & > svg {
          position: absolute;
          width: 20px;
          height: 20px;
          display: inline;
          flex: 0 0 20px;
          fill: currentColor;
        }

        .lbaic-settings-table-card-body-input-i {
          opacity: 1;
        }

        &:hover {
          .lbaic-settings-external-arrow {
            animation: moveAndBack .6s ease;
          }
        }
      }
    }
  }

  &-close {
    position: absolute;
    right: -6px;
    top: -10px;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: rgba(var(--lbaic-settings-white-rgb), 1);
    border-radius: 30%;
    box-shadow: 0 0 1px 0px #0000001f;
    transition: background-color 0.3s ease-in-out;

    &-i {
      width: 8px;
      height: 8px;
      margin: auto;
      display: block;
      fill: var(--lbaic-settings-notification-fill);
    }

    &:hover {
      background-color: var(--lbaic-settings-button-bg-hover);
    }

    &:active {
      background-color: var(--lbaic-settings-button-bg-active);
    }
  }

  &-body {
    padding-inline-start: 24px;
  }

  &-desc {
    &, & > * {
      font-size: var(--lbaic-settings-fs-13);
      font-weight: var(--lbaic-settings-fw-500);
      color: var(--lbaic-settings-notification-desc-color);
      line-height: var(--lbaic-settings-lh-20);
    }

    & > a, & > pre, & > code {
      pointer-events: stroke;
    }

    & > a {
      align-items: center;
      font-size: var(--lbaic-settings-fs-14);
      font-weight: var(--lbaic-settings-fw-500);
      color: var(--lbaic-settings-notification-title-color);
      line-height: var(--lbaic-settings-lh-20);
      text-decoration: none;
      white-space: pre-wrap;
      word-break: break-word;

      & > svg {
        position: absolute;
        width: 20px;
        height: 20px;
        display: inline;
        flex: 0 0 20px;
        fill: currentColor;
      }

      .lbaic-settings-table-card-body-input-i {
        opacity: 1;
      }

      &:hover {
        .lbaic-settings-external-arrow {
          animation: moveAndBack .6s ease;
        }
      }
    }

    @include min-width($lbaic-settings-wp-breakpoint) {
      overflow-x: hidden;
    }

    /* Inline code style */
    code {
      background: #f3f4f6;
      color: #d63384;
      padding: 4px 8px;
      border-radius: 6px;
      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
      font-size: var(--lbaic-settings-fs-11);
      font-weight: 500;
      border: 1px solid #e5e7eb;
      transition: all 0.2s ease;
      text-wrap: auto;

      &:hover {
        background: #e5e7eb;
        border-color: #d1d5db;
        transform: translateY(-1px);
      }
    }

    /* Pre block style - Dark theme */
    pre {
      margin-block: 10px;
      background: #EEEEEE;
      color: #383a43;
      padding: 8px;
      border-radius: 4px;
      overflow-x: auto;
      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
      font-size: var(--lbaic-settings-fs-11);
      line-height: 1.6;

      /* Custom scrollbar */
      &::-webkit-scrollbar {
        height: 6px;
      }

      &::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: #c9c9c9;
        border-radius: 4px;
      }

      /* Syntax highlighting colors */
      code {
        background: none;
        color: inherit;
        padding: 0;
        border: none;
        display: block;

        &:hover {
          transform: none;
          background: none;
        }
      }
    }
  }

  &-hide {
    animation: lbaic-settings-notification-hide 600ms forwards;
  }
}