@import 'variables';
@import 'mixins';
@import 'functions';
@import 'config/import';

.notifications-index {
  .home {
    overflow: initial;

    .articles-list {
      .signup-cue {
        padding: 30px 25px;
        background: white;
        border-radius: 6px;
        box-shadow: 0px 3px 9px #d4dce4;
        hr {
          margin: 30px auto 15px;
        }
        a.sign-up-link {
          display: inline-block;
          border: 1px solid $medium-gray;
          padding: 4px 8px;
          border-radius: 3px;
          margin: 20px 6px;
          img {
            width: 18px;
            vertical-align: -1px;
          }
        }
      }
      .signup-cue-advanced {
        text-align: left;
        padding: 30px 25px;
        .sloan {
          height: calc(5vw + 200px);
          margin: 10px auto 30px;
          display: block;
        }
      }
      .single-article {
        .reaction-images {
          display: inline-block;
        }
        .reaction-image {
          width: 21px;
          height: 21px;
          vertical-align: -4px;
        }
        .content {
          padding-bottom: 18px;
          line-height: 1.35em;
          &.notification-content {
            a {
              color: $sky-blue;
              font-weight: 500;
            }
          }
          &.broadcast-content {
            .opt-out {
              padding-top: 24px;
              font-size: 12px;
              font-style: italic;
            }
          }
          &.reaction-content {
            width: calc(100% - 145px);
          }
          &.badge-content {
            margin: auto;
            width: 98%;
            display: block;
            text-align: center;
            .badge-title {
              margin: 6px auto;
              width: 90%;
              font-size: 1.3em;
            }
            p.badge-description {
              margin: 10px auto;
              width: 90%;
              @include themeable(color, theme-secondary-color, #666666);
              &.milestone-emojis {
                font-size: xx-large;
                padding-top: 10px;
                padding-bottom: 0px;
              }
            }
            img.badge-image {
              margin: 10px 0px 20px;
              height: 150px;
            }
            img.milestone-gif {
              margin: 10px 0px 10px;
              border-radius: 8px;
              width: 300px;
            }
            hr.minimal-divider {
              width: 90px;
              opacity: 0.4;
              margin: 18px auto 22px;
            }
            p.badge-reward-message {
              margin: 8px auto;
              width: 90%;
              color: var(--body-color);
            }
            p.badge-credit-message {
              margin: 8px auto;
              width: 100%;
              color: var(--body-color);
              font-size: 0.94em;
              line-height: 1.35em;
              strong a {
                font-weight: 700;
              }
            }
          }
          .follow-action-button {
            display: block;
            color: white;
            background: $sky-blue;
            border: 2px solid $sky-blue;
            border-radius: 3px;
            font-size: 1.1em;
            margin-top: 0.3em;
            padding: 2px 10px;
            min-height: 33px;
            min-width: 150px;
            &.following-butt {
              background: $sky-blue;
              color: white;
            }
            &:hover {
              border: 2px solid darken($sky-blue, 5%);
            }
            &.badge-button {
              margin-bottom: 12px;
              display: inline-block;
            }
          }
          .mod-instructions {
            font-size: 0.9em;
            background: darken($light-gray, 1%);
            border: 1px solid darken($light-gray, 12%);
            width: 80%;
            padding: 10px 0px 10px 35px;
            border-radius: 3px;
          }
          .notification-comment-reacted-link {
            padding: 2px 6px;
            border: 1px solid lighten($medium-gray, 9%);
            border-radius: 3px;
            max-width: 100%;
            display: inline-block;
            margin-bottom: 3px;
            &:hover {
              @include themeable(
                background,
                theme-container-background-hover,
                lighten($blue, 57%)
              );
              border: 1px solid lighten($sky-blue, 17%);
            }
          }
          .notification-new-post {
            padding: 12px 10px;
            margin-top: 10px;
            border: 1px solid lighten($dark-gray, 18%);
            border-radius: 3px;
            color: var(--body-color);
            position: relative;
            .notification-new-post-title {
              font-size: 1.7em;
              word-wrap: break-word;
              line-height: 1.06em;
            }
            .notification-new-post-tags {
              margin-top: 6px;
              @include themeable(color, theme-color, $medium-gray);
            }
          }
          .footnote {
            font-size: 0.8em;
            opacity: 0.9;
          }
          .follower-pic-row {
            display: inline-block;
          }
        }
        .comment-link-wrapper {
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }
        .comment-text {
          padding: 10px;
          margin-top: 10px;
          border: 1px solid lighten($dark-gray, 18%);
          border-radius: 3px;
          color: var(--body-color);
          position: relative;
          .comment-text-header {
            display: block;
            padding: 5px 10px;
            margin-left: -10px;
            margin-top: -10px;
            margin-bottom: 8px;
            border-bottom: 1px solid lighten($dark-gray, 18%);
            width: 100%;
            font-weight: bold;
            font-size: 0.76em;
            position: relative;
            z-index: 6;
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            @include themeable(
              background,
              theme-container-accent-background,
              lighten($lightest-gray, 1%)
            );
          }
          &:hover {
            border: 1px solid $black;
          }
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            font-size: 1.2em;
          }
          p {
            color: var(--body-color);
            width: 99%;
            padding: 0;
            margin-left: 0;
          }
          img {
            max-width: 100%;
            max-height: 400px;
          }
        }
        .comment-actions {
          position: relative;
          button {
            background: transparent;
            border: 0px;
            margin-top: 5px;
            margin-left: -5px;
            margin-right: 3px;
            height: 30px;
            width: 45px;
            padding: 3px 0px;
            overflow-y: hidden;
            -webkit-appearance: none;
            .reacted-emoji {
              display: none;
            }
            &.readinglist-button {
              background: darken($purple, 26%);
              color: white;
              font-family: $helvetica-condensed;
              height: auto;
              width: auto;
              padding: 3px 7px;
              display: inline-block;
              vertical-align: 5px;
              font-size: 17px;
              border-radius: 3px;
              float: right;
              img {
                opacity: 1;
              }
              &.reacted {
                vertical-align: 0px;
                padding: 3px 7px 1px;
              }
            }
            &.reacted {
              background: transparent;
              .reacted-emoji {
                display: inline;
              }
              .reaction-button-text {
                display: none;
              }
              img {
                display: none;
              }
            }
          }
          img {
            height: 25px;
            width: 25px;
            opacity: 0.7;
            &:hover {
              opacity: 1;
            }
          }
          .toggle-reply-form {
            position: absolute;
            right: 5px;
            bottom: 8px;
            font-weight: 300;
            font-family: $helvetica-condensed;
            font-stretch: condensed;
            color: $bold-blue;
            &.already-replied-link {
              color: $green;
            }
          }
        }
        .reply-sent-notice {
          @include themeable(
            background,
            theme-container-background,
            $light-green
          );
          text-align: center;
          padding: 10px 0px;
          a {
            display: inline-block;
            background: $green;
            color: white !important;
            padding: 3px 8px;
            border-radius: 3px;
          }
        }
        form {
          width: 104%;
          background: $light-gray;
          overflow: auto;
          position: relative;
          margin-bottom: calc(0.8vw - 6px);
          z-index: 4;
          margin-left: -2%;
          border-top: 1px solid $light-medium-gray;
          text-align: right;
          display: none;
          margin-top: 4px;
          @include themeable(
            background,
            theme-container-accent-background,
            $light-gray
          );
          &.showing {
            display: block;
          }
          &.submitting {
            input[type='submit'] {
              background: #00bbff;
            }
            textarea {
              color: lighten($dark-gray, 25%);
              border: 1px solid $light-green;
              background: #fff url(image-src('loading-ellipsis.svg')) no-repeat
                center center;
              background-size: 50px;
            }
          }
          @media screen and (min-width: 820px) {
            width: 100%;
            margin-left: 0%;
            border-radius: 3px;
            @include themeable(
              border,
              theme-container-border,
              1px solid rgb(232, 229, 229)
            );
          }

          .field {
            margin-bottom: 0px;
          }
          textarea {
            width: 92%;
            margin: 15px auto 2px;
            display: block;
            resize: none;
            border-radius: 3px;
            height: 55px;
            font-size: 16px;
            padding: 6px;
            transition: height 0.3s ease;
            height: calc(2vw + 120px);
            @include themeable(
              border,
              theme-container-background,
              1px solid rgb(232, 229, 229)
            );
            background: var(--card-bg);
            color: var(--body-color);
          }
          input[type='submit'] {
            margin-right: 15px;
            background: rgb(0, 146, 228);
            color: white;
            border: 0px;
            font-size: 11px;
            font-weight: 500;
            margin-top: 3px;
            padding: 5px 12px;
            border-radius: 3px;
            appearance: none;
          }
        }
      }
      .single-notification {
        cursor: default;
      }
      .unseen {
        @include themeable(
          background,
          theme-container-accent-background,
          $light-purple
        );
      }
    }
  }

  .load-more-wrapper {
    clear: both;

    @include load-more;
  }
}


// Notifications filtering on mobile.
.notifications-filter__tabs {
  display: none;

  // @media screen and (min-width: 950px) {
  //   display: none;
  // }

  &.showing {
    display: flex;
  }
  background:  var(--base-inverted);
}

.notifications-filter__list {
  li {
    margin-bottom: $su-1;

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

  &--item {
    align-items: center;
    border-radius: $br-default;
    box-sizing: border-box;
    color: var(--card-color);
    display: inline-flex;
    font-weight: $fw-medium;
    justify-content: space-between;
    padding: $su-2;
    width: 100%;

    &:hover {
      background: var(--base-10);
    }

    &.selected {
      background: var(--base-10);

      .notifications-filter__icon {
        visibility: visible;
      }
    }
  }
}

.notifications-filter__dropdown {
  display: none;

  @media screen and (max-width: 950px) {
    display: block;
  }

  &__menu-overlay {
    display: none;

    &.showing {
      display: flex;
    }

    &:before {
      content: "";
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      right: 0;
      height: 100%;
      width: 100%;
      background: rgba(0,0,0,0.5);
      z-index: 499;
    }
  }

  &__header {
    padding: $su-3 $su-4;
  }

  &__title {
    font-weight: $fw-bold;
  }

  &__menu {
    display: flex;
    background: var(--base-inverted);
    flex-direction: column;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 500;
  }

  &__select {
    appearance: none;
    border: none;
    display: flex;
    align-items: center;
    padding: $su-4;
    justify-content: center;
    font-weight: $fw-bold;
    width: 100%;
    font-family: $ff-default;

    &:hover
    &:active,
    {
      background-color: var(--base-10);
    }
  }

  &__icon {
    visibility: hidden;
  }

  &__option {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: $su-3 $su-4;

    &:hover,
    &:active,
    &:focus {
      background-color: var(--base-10);
    }

    &.selected {
    }
  }

  &__label {
    display: flex;
    flex-direction: column;
    align-items: baseline;
  }

  &__label--title {
    font-weight: $fw-medium;
    font-size: $fs-base;
  }

  &__label--subtitle {
    color: var(--base-60);
    font-size: $fs-s;
  }
}

.notifications-filter__list,
.notifications-filter__dropdown {
  .notifications-filter__icon {
    visibility: hidden;
  }

  .selected {
    .notifications-filter__icon {
      visibility: visible;
    }
  }
}
