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

.mod-actions-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  z-index: var(--z-drawer);
  transform: translateX(360px);
  transition: var(--transition-props);

  iframe {
    height: 100%;
    border: none;
    width: 360px;
  }

  &.showing {
    transform: initial;

    iframe {
      box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.1);
    }

    body {
      overflow-y: hidden;
    }
  }
}

.mod-container {
  hr {
    width: 100% !important;
    max-width: none !important;
    height: 1px;
    margin: 8px 0px 8px 0px !important;
    padding: 0px;
    background-color: var(--grey-200);
  }

  display: flex;
  flex-direction: column;
  background-color: var(--base-inverted);
  border: none;
  box-shadow: none;
  margin-bottom: 0;
  height: 100%;

  .circle {
    border-radius: 100%;
    &.centered-icon {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  header {
    &.top-header {
      background-color: var(--base-inverted);
      padding: var(--su-4) var(--su-4) 0;
      display: flex;
      flex-direction: column;
    }

    &.other-things {
      padding: var(--su-4);

      h3 {
        text-transform: uppercase;
        font-size: var(--fs-s);
      }
    }

    h1 {
      font-size: var(--fs-l);
      font-weight: var(--fw-bold);
    }

    h2 {
      font-size: var(--fs-base);
      font-weight: var(--fw-normal);
      color: var(--base-70);
    }

    button.close-actions-panel {
      position: absolute;
      right: var(--su-4);
      top: var(--su-4);
    }
  }

  .reactions-container {
    padding: var(--su-4);
    background-color: var(--base-inverted);
  }

  .thumb-reactions-container {
    display: grid;
    grid-gap: var(--su-4);
    grid-template-columns: 1fr 1fr;
  }

  .reaction-button,
  .subscribe-button {
    position: relative;
    background: transparent;
    border-color: transparent;
    border: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: var(--su-10);
    padding: var(--su-4) var(--su-6);
    border-radius: var(--radius);

    &:hover {
      background: rgba(59, 73, 223, 0.05);
    }

    &:hover .reaction-button-circle {
      border-color: var(--accent-brand);
    }
  }

  .reaction-button-circle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: var(--su-9);
    height: var(--su-9);
    border: solid 2px var(--base-20);
    border-radius: 100%;
    background: var(--base-inverted);

    img {
      width: var(--su-7);
    }

    .reaction-checkmark {
      opacity: 0;
      position: absolute;
      bottom: 0;
      right: 0;
      width: var(--su-5);
      height: var(--su-5);
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--accent-success);
      border-radius: 100%;
      border: 2px solid var(--base-inverted);
      padding: 2px;
      color: var(--base-inverted);
    }
  }

  .vote-text {
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    margin-top: var(--su-2);
    color: var(--base-90);
    white-space: nowrap;
  }

  .reaction-vomit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--base-inverted);
    height: var(--su-7);
    padding: var(--su-1) var(--su-2);
    margin: var(--su-4) auto;
    border-radius: var(--radius);

    img {
      margin-right: var(--su-2);
      width: var(--su-6);
      height: var(--su-6);
    }

    span {
      font-weight: var(--fw-medium);
      font-size: var(--fs-s);
      line-height: var(--lh-tight);
      color: var(--base-90);

      &:after {
        content: 'Flag to Admins';
      }
    }

    .vomit-checkmark {
      width: var(--su-5);
      height: auto;
      font-weight: var(--fw-heavy);
      margin-left: var(--su-2);
      color: var(--accent-brand);
      display: none;
    }

    &:hover {
      background: rgba(59, 73, 223, 0.05);
    }
  }

  .max-tags-text {
    display: flex;
    padding: var(--su-2) var(--su-3);
    align-items: center;
    gap: var(--su-2);

    span {
      color: var(--color-secondary);
      font-size: var(--fs-s);
      line-height: var(--lh-base);
      letter-spacing: -0.28px;
    }
  }

  .adjustment-restriction__container--text {
    color: var(--color-secondary);
  }

  .adjustment-restriction__container--tag {
    font-family: var(--ff-monospace);
    line-height: var(--lh-base);
    letter-spacing: -0.32px;
    color: var(--tag-name);

    .num-sign {
      color: var(--tag-hash);
    }
  }

  .additional-subtext-section {
    font-weight: var(--fw-medium);
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    letter-spacing: -0.02em;
    color: var(--base-70);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    svg {
      width: var(--su-4);
      height: var(--su-4);
      padding: var(--su-1);
      path {
        fill: var(--base-70);
      }
    }
  }

  .reaction-button.reacted {
    background: var(--btn-primary-bg);

    .reaction-button-circle {
      border-color: var(--btn-primary-bg);
    }

    .vote-text {
      color: var(--base-inverted);
    }

    .reaction-checkmark {
      opacity: 100;
    }
  }

  .reaction-vomit-button.reacted {
    background: rgba(59, 73, 223, 0.1);

    .vomit-checkmark {
      display: inline;
    }

    span {
      color: var(--accent-brand);

      &:after {
        content: 'Flagged to Admins';
      }
    }
  }

  .reaction-button .reacted-emoji,
  .reaction-vomit-button .reacted-emoji {
    display: none;
  }

  .reaction-button.reacted .emoji-grey,
  .reaction-vomit-button.reacted .emoji-grey {
    display: none;
  }

  .reaction-button.reacted .reacted-emoji,
  .reaction-vomit-button.reacted .reacted-emoji {
    display: block;
  }

  .other-things-container {
    border-top: 1px solid var(--base-20);
    overflow-y: auto;

    div.article-admin-action {
      background: inherit;
      border: none;
      justify-content: center;
      text-align: center;
      cursor: auto;
    }

    button.other-things-btn {
      background: inherit;
      border: none;
      padding: var(--su-3) var(--su-4);
      width: 100%;
      display: flex;
      justify-content: space-between;
      .label-wrapper {
        display: flex;
        align-items: center;
        .icon {
          background-color: var(--base-20);
          width: 40px;
          height: 40px;
        }
        header {
          text-align: left;
          margin-left: var(--su-3);
          display: flex;
          flex-direction: column;
          width: 240px;
          h2 {
            color: var(--base-100);
            font-size: var(--fs-base);
            font-weight: var(--fw-medium);
          }
          h3 {
            color: var(--base-70);
            font-size: var(--fs-s);
            font-weight: var(--fw-normal);
          }
        }
      }

      .toggle-chevron-container {
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        transition-duration: 0.4s;
        svg {
          fill: var(--base-80);
        }
        &.rotated {
          transform: rotateZ(-180deg);
        }
      }

      &:hover {
        background-color: var(--base-inverted);
        .label-wrapper > .icon {
          background-color: var(--accent-brand);
          svg path {
            fill: rgba(var(--white), 1);
          }
        }
        header h2 {
          color: var(--accent-brand);
        }
      }

      &.active {
        header h2 {
          font-weight: var(--fw-bold);
        }
      }

      &.inactive:not(.active) {
        header h2 {
          color: var(--base-50);
        }
        header h3 {
          color: var(--base-40);
        }
        .icon {
          background-color: var(--base-20);
          svg path {
            fill: var(--base-50);
          }
        }
        .toggle-chevron-container > svg {
          fill: var(--base-60);
        }
      }
    }

    .dropdown-options {
      flex-direction: column;
      padding: 0 var(--su-4);
      transition-duration: 1s;

      &:not(.hidden) {
        display: flex;
      }
    }

    .adjust-tags-options {
      .add-tag-container {
        padding: var(--su-2) var(--su-1);
      }
      .add-tag-header {
        color: var(--tag-name);
        font-size: var(--fs-base);
        font-weight: var(--fw-bold);
        line-height: var(--lh-base);
      }
      .tag-input-container {
        display: flex;
        margin-top: 12px;
        padding: 8px 8px 8px 12px;
        align-items: center;
        gap: 8px;
        align-self: stretch;
        border-radius: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: var(--grey-500);

        span {
          font-weight: var(--fw-medium);
          font-size: var(--fs-xl);
          color: var(--add-tag-hash);
        }
        input {
          border: none;
          outline: none;
          background-color: transparent;
          color: var(--grey-500);
          font-size: var(--fs-base);
          line-height: var(--ls-base);
        }
        .input:active,
        .input:focus {
          border: none;
          outline: none;
          box-shadow: none;
        }
      }
      button.adjustable-tag {
        background-color: inherit;
        border: none;
        padding: var(--su-2) var(--su-3);
        font-family: var(--ff-monospace);
        font-size: var(--fs-base);
        text-align: left;
        line-height: var(--lh-base);
        border-radius: var(--radius);
        letter-spacing: -0.32px;
        color: var(--tag-name);

        .js-focus-visible &.focus-visible:focus,
        &:is(label):focus-within {
          z-index: var(--z-elevate);
        }

        .js-focus-visible &.focus-visible:focus,
        &:is(label):focus-within {
          box-shadow: var(--focus-ring);
          outline: 0;
        }

        .num-sign {
          color: var(--tag-hash);
          padding-left: 2px;
          padding-right: 2px;
        }
        .remove-icon {
          width: 24px;
          height: 24px;
          float: right;
          margin-right: 2px;
          background-color: var(--subtract-bg);
          color: var(--subtract-color);
        }
        &:hover {
          background-color: var(--tag-item-bg-hover);
          border-radius: 6px;
          .remove-icon {
            opacity: 1;
            background-color: var(--subtract-bg-hover);
            color: var(--subtract-color-hover);
          }
        }
      }

      button.add-tag {
        background-color: inherit;
        border: none;
        padding: var(--su-2) var(--su-3);
        font-size: var(--fs-base);
        text-align: left;
        color: var(--base-80);
        border-radius: var(--radius);
        font-family: var(--ff-monospace);
        .add-icon {
          width: 24px;
          height: 24px;
          float: right;
          margin-right: 2px;
          background: var(--plus-bg);
          color: var(--plus-color);
        }
        &:hover {
          background-color: var(--tag-item-bg-hover);
          border-radius: 6px;
          .add-icon {
            background-color: var(--plus-bg-hover);
            color: var(--plus-color-hover);
          }
        }

        .js-focus-visible &.focus-visible:focus,
        &:is(label):focus-within {
          z-index: var(--z-elevate);
        }

        .js-focus-visible &.focus-visible:focus,
        &:is(label):focus-within {
          box-shadow: var(--focus-ring);
          outline: 0;
        }
      }
      .reason-container {
        display: flex;
        flex-direction: column;
        padding: var(--su-1) var(--su-3) var(--su-2) var(--su-3);
        textarea {
          margin-bottom: var(--su-3);
        }
      }
      #tag-moderation-history {
        h1 {
          font-size: var(--fs-base);
          padding-top: 12px;
          padding-bottom: 16px;
        }

        .tag-adjustment {
          padding-bottom: 8px;
        }

        .num-sign,
        .adjustment-type {
          color: var(--tag-hash);
          padding-left: 2px;
          padding-right: 2px;
        }

        .tag-adjustment-reason {
          color: var(--tag-hash);
          font-style: italic;
          font-size: var(--fs-s);
        }
      }
    }

    .set-experience-options {
      button.level-rating-button {
        background: inherit;
        border: none;
        padding: var(--su-2) 0.125rem;
        width: 100%;
        display: flex;
        justify-content: space-between;

        &:hover {
          background: rgba(var(--accent-brand-lighter-rgb), 0.2);
          border-radius: 8px;
        }

        .level-rating-content {
          display: flex;

          .level-rating-number {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: var(--fw-heavy);
            font-size: var(--fs-base);
            line-height: var(--lh-base);
            color: var(--base-100);
            width: var(--su-6);
          }

          .level-rating-text {
            font-weight: var(--fw-normal);
            font-size: var(--fs-base);
            line-height: var(--lh-base);
            color: var(--base-90);
          }
        }

        svg {
          color: var(--accent-brand);
          width: var(--su-5);
          height: auto;
          margin-right: var(--su-2);
          align-self: center;
          display: none;
        }
      }

      .level-rating-button.selected {
        background: rgba(var(--accent-brand-lighter-rgb), 0.2);
        border-radius: 8px;
        svg {
          display: inline;
        }
      }
    }
  }

  h2 {
    a {
      color: var(--body-color);
    }
  }
  p {
    width: 98%;
    max-width: 720px;
    margin: 1.3em auto;
    font-size: 0.9em;
  }

  hr {
    margin: 30px auto;
    width: 80%;
    max-width: 400px;
    opacity: 0.3;
  }

  #error_explanation {
    margin: 10px auto 5px;
    box-sizing: border-box;
  }
  @media screen and (min-width: 880px) {
    margin: 90px auto;
    border-radius: 12px;
  }

  .tag-mod-form {
    border-top: 1px solid #dddddd;
    margin: 42px auto;

    .level-rating-button.article-mod-page.selected {
      background: #9bebff;
    }
  }

  .tag-mod-form ul {
    text-align: left;
    font-size: 15px;
  }

  .tag-mod-form form {
    width: 500px;
    margin: auto;
    max-width: 90%;
  }

  .tag-mod-form form input {
    width: 100%;
    padding: 5px;
    font-size: 20px;
    margin-bottom: 5px;
    border-radius: 3px;
    box-sizing: border-box;
    border: 1px solid var(--card-color-tertiary);
  }

  .tag-mod-form form input[type='submit'] {
    background: $dark-purple;
    color: white;
    font-weight: bold;
    padding: 16px 0px;
    margin: auto;
    display: block;
    border-radius: 3px;
    font-size: 1.3em;
    font-family: $helvetica-condensed;
  }

  #undo {
    width: 1.5rem;
    font-size: 1.1em;
    display: inline-block;
    color: $red;
    background: transparent;
    border: 0px;
  }

  .tag-mod-form form textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 5px;
    font-size: 17px;
    height: 100px;
    border-radius: 3px;
    border: 1px solid var(--card-color-tertiary);
  }

  input.undo {
    background: $red;
  }

  .tag-mod-addition-radio {
    padding: 5px 20px;
    border-radius: 3px;
    border: 1px solid var(--card-color-tertiary);
    display: inline-block;
    margin: 30px auto 10px;
    min-width: 205px;
    box-sizing: border-box;
    position: relative;
  }

  .tag-mod-form input[type='radio'] {
    position: absolute;
    cursor: pointer;
    top: 7px;
  }

  .tag-mod-form input[type='radio'] + label {
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    padding-left: 25px;
    padding-right: 25px;
    font-size: 22px;
    margin: auto;
    margin-left: 4px;
  }

  .tag-mod-form input[type='radio']:checked + label {
    @include themeable(
      background,
      theme-container-accent-background,
      $light-green
    );
    border-radius: 3px;
  }

  .tag-mod-form select {
    display: block;
    font-size: 20px;
    padding: 12px;
    font-weight: bold;
    margin: auto;
    border: solid 2px;
    margin: 5px auto 15px;
  }
  .approval-button {
    font-size: 20px;
    border: 0px;
    border-radius: 3px;
    padding: 8px 16px;
    &.approval-removal {
      background: $red;
    }
  }
}

.subscribe-button.comment-subscribed {
  background: rgba(59, 73, 223, 0.1);
  color: #4338ca;
}

.subscribe-icon {
  --not-subscribed-display: inline-block;
  --subscribed-display: none;
  width: 16px;
  filter: grayscale(1);
  &.not-subscribed {
    display: var(--not-subscribed-display);
  }
  &.subscribed {
    display: var(--subscribed-display);
  }
}

.comment-subscribed {
  .subscribe-icon {
    filter: grayscale(0);
    --not-subscribed-display: none;
    --subscribed-display: inline-block;
  }
}

// these styles are to correct height and margin issues in the iframe
.moderations-actions_panel {
  min-height: initial;
  height: 100%;

  #page-content-inner {
    margin-bottom: 0;
    height: 100%;
  }
}
