.photoberry-studio-admin-page.post-type-photoberry-gallery.post-new-php #screen-options-link-wrap,
.photoberry-studio-admin-page.post-type-photoberry-gallery.post-php #screen-options-link-wrap,
.photoberry-studio-admin-page.post-type-photoberry-session #screen-options-link-wrap {
  display : none;
  }

.photoberry-studio-admin-header {
  position    : relative;
  display     : flex;
  align-items : center;

  #photoberry-studio-notifications {
    position    : relative;
    margin-left : auto;

    .photoberry-studio-count.photoberry-studio-count-zero {
      display : none;
      }

    &.photoberry-studio-loading {

      #photoberry-studio-notifications-dropdown::before {
        content          : "";
        position         : absolute;
        width            : 100%;
        height           : 100%;
        background-color : rgba(255, 255, 255, 0.9);
        display          : block;
        top              : 0;
        left             : 0;
        z-index          : 3;
        }

      #photoberry-studio-notifications-dropdown::after {
        content           : "";
        position          : absolute;
        top               : 45%;
        left              : calc(50% - 9px);
        width             : 18px;
        height            : 18px;
        background-repeat : no-repeat;
        background-image  : url("../img/icons/gray/spinner-solid.svg");
        animation         : photoberry-studio-rotation 2s infinite ease;
        background-size   : cover;
        z-index           : 5;
        }

      .photoberry-studio-count {
        opacity : 0;
        }

      button.photoberry-studio-button-icon-notification {
        background-image : unset;
        position         : relative;
        }

      button.photoberry-studio-button-icon-notification::before {
        content           : "";
        position          : absolute;
        top               : 8px;
        left              : 8px;
        width             : 18px;
        height            : 18px;
        background-repeat : no-repeat;
        background-image  : url("../img/icons/gray/spinner-solid.svg");
        animation         : photoberry-studio-rotation 2s infinite ease;
        background-size   : cover;
        }
      }

    .photoberry-studio-count.photoberry-studio-count-inline:not(.photoberry-studio-count-zero) {
      position : relative;
      display  : inline-block;
      top      : unset;
      }


    #photoberry-studio-notifications-dropdown {
      display  : none;
      position : absolute;
      top      : 100%;
      right    : 0;
      width    : 300px;

      z-index  : 1000;
      overflow : hidden;
      border   : 1px solid #e7ecef;
      @include container();

      .photoberry-studio-close { display: none; }

      #photoberry-studio-notifications-filters {
        display         : flex;
        justify-content : flex-start;
        padding         : 10px;
        border-bottom   : 1px solid #e7ecef;
        font-size       : 13px;
        margin          : 10px 0 0;

        > li {
          padding : 0 20px 0 10px;

          &:not(:first-child) {
            border-left : 1px solid #d8dde1;
            }

          > a {
            display     : flex;
            align-items : center;
            color       : $text-primary;
            }

          &.photoberry-studio-active > a {
            color       : $primary-color;
            font-weight : bold;
            }

          }

        li:not(.photoberry-studio-active) .photoberry-studio-count {
          color            : #fff;
          background-color : #d8dde1;
          }

        }

      #photoberry-studio-notifications-actions {
        padding    : 15px 10px;
        text-align : center;
        border-top : 1px solid #e7ecef;
        margin     : 0;

        button {
          &:disabled {
            background   : #ccc;
            border-color : #ccc;
            cursor       : not-allowed;
            color        : #fff;
            }
          }
        }
      }

    @media (min-width : 1400px) {
      #photoberry-studio-notifications-dropdown {
        width : 340px;
        }
      }

    &.photoberry-studio-active #photoberry-studio-notifications-dropdown,
    &:hover #photoberry-studio-notifications-dropdown {
      display : block;
      }
    }
  }

#photoberry-studio-notification-popups,
#photoberry-studio-notifications-list {
  max-height : 220px;
  overflow-y : auto;
  padding    : 10px 5px;
  margin     : 0;

  // shows when there are no notifications to display
  li.photoberry-studio-none {
    font-size  : 12px;
    text-align : center;
    }

  li label > span {

    padding-left : 20px;

    &:before {
      content       : "";
      width         : 8px;
      height        : 8px;
      line-height   : 8px;
      border-radius : 50%;
      background    : $gray-4;
      position      : absolute;
      display       : block;
      top           : 6px;
      left          : 0;
      }
    }

  li:has(input:checked) label > span::before {
    background-image    : url("../img/check.svg");
    background-position : center;
    background-size     : 8px;
    padding             : 3px;
    background-repeat   : no-repeat;
    top                 : 4px;

    }

  li.photoberry-studio-unread {

    background-color : #f6f6f7;

    label > span:before {
      background : $primary-color;
      }
    }

  li {
    display        : flex;
    flex-direction : column;
    padding        : 10px 10px;
    border-bottom  : 1px solid $gray-3;
    color          : $text-primary;
    font-size      : 13px;

    label {
      display        : flex;
      flex-direction : row;
      cursor         : pointer;

      input[type="checkbox"] {
        margin-right : 10px;
        width        : 30px;
        display      : none;
        }

      > span {
        display     : block;
        line-height : 1.7em;
        position    : relative;

        > span {
          color        : $gray-6;
          margin-right : 5px;
          }
        }

      strong {
        display      : inline-block;
        margin-right : 8px;
        font-weight  : bold;
        }

      small {
        color   : $gray-6;
        display : block;
        }

      a {
        color           : $primary-color;
        font-size       : 12px;
        text-decoration : none;
        display         : inline-block;
        margin-bottom   : 6px;
        font-weight     : bold !important;
        @include buttonText;

        &:hover {
          text-decoration : underline;
          }
        }
      }
    }

  li:has(input:checked) {
    background-color : $gray-2;
    }

  li:last-child {
    border-bottom : none;
    }
  }

#photoberry-studio-notification-popups {
  position       : fixed;
  bottom         : 20px;
  right          : 20px;
  z-index        : 9999;
  background     : rgba(255, 255, 255, 0.9);
  border-radius  : 8px;
  box-shadow     : 0 2px 6px rgba(0, 0, 0, 0.2);
  width          : 300px;
  padding        : 20px 10px 10px;
  display        : flex;
  gap            : 10px;
  flex-direction : column-reverse;
  pointer-events : none;

  .photoberry-studio-close {
    width: 32px;
    height: 32px;
    top: 0;
    right: 0;
    background-color : transparent;

    &:hover {
      background-color : transparent;
      box-shadow: unset;
      opacity: 0.9;
      }

    }

  li {
    position       : relative;
    z-index        : auto;
    pointer-events : auto;
    animation      : photoberry-studio-fadeIn 0.3s ease-out;
    margin-top     : -10px; // Negative margin for slight overlap with the one below

    strong {
      font-size     : 14px;
      margin-bottom : 5px;
      }

    span {
      font-size : 12px;
      }

    label > span {
      padding-left : 35px;

      &:before {
        background-color    : $primary-color;
        background-image    : url(../img/icons/white/notification.svg);
        background-position : center;
        background-size     : 14px;
        padding             : 7px;
        background-repeat   : no-repeat;
        top                 : 0;
        }
      }

    a {
      display    : block;
      margin-top : 10px;
      }

    }

  li:last-child {
    margin-bottom : 0;
    }
  }

@keyframes photoberry-studio-fadeIn {
  from {
    opacity   : 0;
    transform : translateY(10px);
    }
  to {
    opacity   : 1;
    transform : translateY(0);
    }
  }
