@import '../variables.less';

// Mark as read
// Attempts to shorten the following two rules may fail due to less.php. Make sure it works when
// modifying it.
.mw-echo-ui-toggleReadCircleButtonWidget-circle:not(
    .mw-echo-ui-toggleReadCircleButtonWidget-circle-unread
  ) {
  background-color: @color-secondary2;
}
.mw-echo-ui-toggleReadCircleButtonWidget:hover
  .mw-echo-ui-toggleReadCircleButtonWidget-circle:not(
    .mw-echo-ui-toggleReadCircleButtonWidget-circle-unread
  ) {
  background-color: @color-secondary1;
}
.notificationIcon(@icon) {
  img[src='/extensions/Echo/modules/icons/@{icon}.svg'] {
    content: url('../../node_modules/@femiwiki/ooui-femiwiki-theme/dist/resources/images/icons/@{icon}.svg');
  }
}

.mw-echo-ui-notificationItemWidget-icon {
  .notificationIcon(edit-progressive);
  .notificationIcon(link-progressive);
  .notificationIcon(speechBubbles-ltr-progressive);
  .notificationIcon(articleCheck-progressive);
}

.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget.oo-ui-optionWidget {
  &-highlighted {
    background-color: @color-background1;
    color: @color-primary4;
  }

  &-selected {
    background-color: @color-background1;
    color: @color-primary5;
  }

  &-selected&-highlighted,
  &-pressed&-highlighted {
    color: @color-primary5;
  }
}

.skin-femiwiki
  .oo-ui-optionWidget-selected
  .mw-echo-ui-pageNotificationsOptionWidget-label-count {
  color: @color-primary5;
}

.mw-echo-ui-notificationItemWidget-initiallyUnseen.mw-echo-ui-notificationItemWidget-unread {
  @notification-background-unseen: @color-secondary1;
  @notification-background-read: #fff;

  @-webkit-keyframes fw-unseen-fadeout-to-read {
    from {
      background-color: @notification-background-unseen;
    }
    to {
      background-color: @notification-background-read;
    }
  }
  @keyframes fw-unseen-fadeout-to-read {
    from {
      background-color: @notification-background-unseen;
    }
    to {
      background-color: @notification-background-read;
    }
  }

  -webkit-animation-name: fw-unseen-fadeout-to-read;
  animation-name: fw-unseen-fadeout-to-read;
}

// Without this, Echo popup is not correctly clipped.
// https://github.com/femiwiki/FemiwikiSkin/issues/78
@media screen and (max-width: @width-breakpoint-tablet) {
  .mw-echo-ui-overlay {
    margin: 0 10px;

    .oo-ui-popupWidget-anchored > .oo-ui-popupWidget-anchor {
      display: none;
    }

    .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
      left: 0 !important;
      width: 100%;

      .oo-ui-popupWidget-popup {
        width: initial !important;
        max-width: 500px;

        .oo-ui-clippableElement-clippable {
          width: 100% !important;
        }
      }
    }
  }
}
