@use '../../styles/abstracts' as *;

/* Molecule - notifications */
.m-notifications {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: toRem(30);
  min-height: toRem(23);

  .a-btn {
    width: toRem(40);
    height: toRem(40);

    &:before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .a-pastille {
      position: absolute;
      top: toRem(-7);
      right: toRem(-7);
    }
  }
}

.m-notifications-list {
  position: absolute;
  top: toRem(15);
  right: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: toRem(275);
  max-height: toRem(665);
  border-radius: toRem(5);

  // Caret top
  .caret-top {
    position: absolute;
    z-index: 3;
    bottom: 100%;
    left: toRem(227);
    width: 0;
    border: 0.5rem solid transparent;
    border-top: none;
    border-bottom-color: #fff;
    filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
  }

  &__header {
    width: 100%;
    padding: toRem(15);
    .a-p.none{
      margin-top: toRem(10);
    }

    .a-btn {
      padding-left: toRem(15);
      padding-right: toRem(15);
    }
  }

  &__content {
    overflow: auto;
    height: auto;
    padding-bottom: toRem(15);
  }

  &__items {
    @extend %list-unstyled;
    padding: 0 15px;
    &__li {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: toRem(13) 0 toRem(15) 0;
      &:last-of-type {
        padding-bottom: toRem(5);
      }

      &__txt {
        .a-h3 {
          margin-bottom: 0;
          padding-bottom: toRem(3);
          padding-right: toRem(16);
        }
        .a-p {
          padding-right: toRem(16);
          padding-bottom: 0;
          &.date {
            margin-bottom: toRem(7);
          }
          &.desc {
            margin-bottom: 0;
            + a {
              display: block;
              margin-top: toRem(10);
              cursor: pointer;
            }
          }
        }
      }

      .a-btn.a-btn--deletenotification {
        position: relative;
        width: toRem(22);
        height: toRem(22);
        padding: toRem(3);
      }
    }
  }
}