@use "../../../../../styles" as *;

.notifications {
  width: 100%;
  height: 100%;
  position: absolute;
  margin-top: $header-height;
  left: 0;
  padding: 0px 25px;
  background-color: $col-dark;
  z-index: 2;
  // transition: opacity 550ms;
  animation: show-animation 500ms ease-out 0s 1 normal both;
  &:has(.back-input:checked) {
    animation: hide-animation 500ms ease-out 0s 1 normal both;
  }
  // .page-content {
  //   position: absolute;
  //   background-color: $col-dark;
  .slider {
    display: flex;
    flex-direction: column;
    gap: $gap-15;
    .notification {
      position: relative;
      span {
        color: $col-gray;
        display: block;
        width: 100%;
        text-align: center;
        &.time {
          width: fit-content;
          position: absolute;
          right: 0;
        }
      }
      h3 {
        color: white;
        padding-bottom: 15px;
      }
      p {
        color: $col-gray;
        border-radius: $rad-25;
        background: $sec-gradient;
        padding: 15px;
      }
    }
  }
  // }
}
