ManageIQ/manageiq-ui-classic

.footer-button-left {
  text-align: right;
  margin: 10px;
  border: none;
}

.footer-button-right {
  text-align: left;
  margin: 10px;
  border: none;
}

#notifications-toggle {
  display: inline-block;
  // FIXME flex?
  width: 140px;
  border-color: #bbb;
  background-color: transparent;
  color: #4d5258;

  &:hover {
    color: #4d5258;
    background-color: transparent;
  }

  &.unread {
    svg {
      fill: #39a5dc;
    }
  }
}

#toastnotification {
  position: fixed;
  z-index: 900;
  right: 50px;
  top: 50px;
}

#breadcrumbs .breadcrumb {
  display: inline-block;
  margin-bottom: 0;
  width: calc(100% - 140px);
}

.backgrounded-icon {
  display: inline-block;
  height: 20px;
  width: 20px;
  text-align: center;

  i {
    align-self: center;
    color: #fff;
  }
}

.notification-drawer {
  background-color: #fafafa;
  border: 1px solid #d1d1d1;
  -webkit-box-shadow: 0 6px 12px rgb(3 3 3 / 18%);
  box-shadow: 0 6px 12px rgb(3 3 3 / 18%);
  position: absolute;
  right: 10px;
  width: 450px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  top: 5px;
  height: calc(100% - 44px);

  .panel-header {
    background-color: #fafafa;
    border-bottom: 1px solid #d1d1d1;
    position: absolute;
    width: 100%;
    background-image: linear-gradient(to bottom, #fafafa 0%, #ededed 100%);
    display: flex;
    align-items: center;
    justify-content: center;

    button {
      cursor: pointer;
      background: none;
      color: #252525;
      
      &:focus, &.bx--btn--primary:focus, svg {
        outline: 0 !important;
        border-color: #fafafa;
        box-shadow: none;

      }

      &:hover {
        background: lightgray;
      }
    }

    .notification-title {
      display: flex;
      flex-grow: 1;
      align-items: center;
      justify-content: center;
      margin: 0;
    }
    
  }

  .bx--accordion--start .bx--accordion__heading {
    background-image: linear-gradient(to bottom, #fafafa 0%, #ededed 100%);
  }

  .bx--accordion__content {
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    overflow-y: hidden;
    flex-direction: column;
    min-height: 0;

    .bx--inline-notification {
      margin-top: 0;
      padding-top: 0;
      margin-bottom: 0;
      min-height: 100px;
      height: auto;

      .bx--btn--ghost:hover,
      .bx--btn--ghost:active {
        background-color: inherit;
      }

      .bx--inline-notification__details {
        display: flex;
        flex-grow: 1;

        .bx--inline-notification__text-wrapper {
          flex-wrap: unset;
          flex-grow: 1;
  
          .notification-time {
            left: 55px;
            position: absolute;
            bottom: 3px;
          }
  
          .bx--inline-notification__title {
            margin-bottom: 20px;
            display: flex;
            flex-grow: 1;
          }
  
          .subtitle-div {
            height: 100%;
  
            .subtitle-div-notification-menu {
              height: 80%;
            }
  
            .subtitle-div-notification-time {
              height: 20%;
            }
          }
        }
      }

      
    }

    .read {
      .bx--inline-notification__title {
        font-weight: 400;
      }

      .bx--inline-notification__subtitle {
        font-weight: 200;
      }
    }
  }
}

.notification-module {
  display: inline;
  margin: 10px 0 0 0;
}

.notification-content {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  bottom: 0;
  margin-bottom: 0;
  position: absolute;
  top: 47px;
  width: 100%;
}

.events-count {
  display: flex;
  flex-direction: column;
}

.maxnotifications-text {
  margin-left: 60px;
  margin-top: 15px;
  display: flex;
  flex-direction: column;

  button {
    background: none !important;
    border: none;
    padding: 0 !important;
    font-family: arial, sans-serif;
    text-decoration: none;
    cursor: pointer;
    color: #0f62fe;
  }
}

@media (min-width: 767px) {
  .notification-drawer.notification-drawer-expanded {
    left: 480px;
    width: inherit;

    .bx--inline-notification {
      max-width: inherit;
    }

    .notification-footer {
      width: 100%;
      padding-left: 450px;
    }

    .notification-time {
      padding-top: 0 !important;
    }
  }
}

.notification-accordion-content {
  overflow-y: auto;
  height: 100%;

  .notification-content-messages {
    position: absolute;
    overflow-y: scroll;
    height: calc(100% - 115px);
  }

  .notification-footer {
    bottom: -65px;
    position: absolute;
    width: 450px;
    height: 115px;
    border-top: 1px solid #d1d1d1;

    button {
      width: 225px;
      padding: calc(0.875rem - 3px) 35px;
    }
  }
}

.refresh-notifications {
  display: flex;

  .last-refresh-notification {
    margin-top: 0;
    margin-left: 10px;
  }

  .date-notification {
    margin-left: 20px;
  }
}