@use "./_variable.scss" as *;
@use "sass:math";
@use "sass:list";

window.notifications {
  margin: 10px;

  .notification {
    background: $bg-color;
    padding: 20px;
    border-radius: $rounded;
    min-width: 20rem;

    .header {
      .close {
        padding: 10px;
        background: $inactive-color;
        border-radius: $rounded;

        &:hover {
          background: $bg-color;
        }
      }

      .app-icon {
        -gtk-icon-size: 2rem;
      }
    }

    .content {
      .image {
        -gtk-icon-size: 4rem;
      }
    }

    .actions {
      button {
        background: $inactive-color;
        padding: 10px;
        border-radius: $rounded;

        &:hover {
          background: $bg-color;
        }
      }
    }

    &.critical {
      border: 1px solid rgba(red, 0.5);
    }

    .text {
      color: rgba($fg-color, 0.8);

      .title {
        font-weight: 600;
      }
    }
  }
}