@import "./globals";
@import "./forms";
@import "./recent";
@import "./emoticons/emoticons";
@import "./tenor";
@import "./channel/messages/reactions";

@mixin popups {

  #popup-root {
    @include globals;
  }

  .wcPopup-overlay {
    background: rgba(255,255,255,.7);
    z-index: calc(var(--wc-z-index) + 10) !important;
  }

  .wcPopup-content {
    z-index: calc(var(--wc-z-index) + 10) !important;
    @include forms;
    @include emoticons;
    @include reactions;
    @include tenor;
  }

  .wcPopup-content.wcModal-content {
    @media only screen and (max-width: 576px) {
      width: 95%;
    }

    @media only screen and (min-width: 577px) and (max-width: 1150px) {
      &.wcModal-sm-content {
        width: 300px;
      }
      &.wcModal-md-content {
        width: 500px;
      }
      &.wcModal-lg-content, &.wcModal-xl-content {
        width: 95%;
      }
    }

    @media only screen and (min-width: 1151px) {
      &.wcModal-sm-content {
        width: 300px;
      }
      &.wcModal-md-content {
        width: 500px;
      }
      &.wcModal-lg-content {
        width: 800px;
      }
      &.wcModal-xl-content {
        width: 1140px;
      }
    }

    .wcModalContent {
      padding: 10px;

      .wcHeader {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 10px;

        > * {
          font-size: 1.3em;
        }

        .wcCloseButton, .wcCloseButton:focus, .wcCloseButton:active {
          font-size: 2em;
          color: inherit;
          text-decoration: none;
          outline: 0;
        }
      }

      .wcFooter {
        margin-top: 10px;
        text-align: right;
        :not(:last-child) {
          margin-right: 5px;
        }
      }

    }

    &.wcStreamVideoConfirmation-content {
      color: red;
      .wcContent {
        .wcStreamRequest {
          text-align: center;

          .wcAvatar {
            border-radius: 5px;
            max-height: 150px;
            max-width: 150px;
          }
          .wcStreamCaller {
            font-size: 1.5em;
          }
          .wcStreamIncomingText {
            margin-top: 15px;
          }
        }
      }
      .wcFooter {
        justify-content: center;

        .wcButton {
          outline: none;
          padding-top: 50px;
          background-position: center top;
          background-repeat: no-repeat;
          background-size: 55px;
          min-width: 55px;
          text-align: center;

          &.wcDeclineButton {
            background-image: url(../../gfx/icons/video-calls/video-decline.svg);
          }

          &.wcAcceptButton {
            background-image: url(../../gfx/icons/video-calls/video-accept.svg);
          }

          &:not(:last-child) {
            margin-right: 20px;
          }
          &:active, &:focus {
            text-decoration: none;
          }
        }
      }
    }
  }

  [role=tooltip].wcActionsPopup-content {
    background-color: #f7f7f7;
    display: flex;
    align-items: center;
    width: auto;

    .wcActions {
      display: flex;
      align-items: center;

      .wcAction {
        padding: 0;
        width: 20px;
        height: 20px;
        display: inline-block;
        position: relative;
        text-decoration: none;
        border: 1px solid #A6A6A6;
        border-radius: 50%;
        transition: all .2s ease-in;
        font-size: 0.9%;

        &:hover {
          background-color: #dfdfdf;
        }

        &:focus {
          outline: none;
        }

        &:not(:last-child) {
          margin-right: 7px;
        }
      }

      .wcApprove {
        background: transparent url("../../gfx/icons/approve.svg") no-repeat 50%;
      }

      .wcDelete {
        background: transparent url("../../gfx/icons/x.svg") no-repeat 50%;
      }

      .wcEdit {
        background: transparent url("../../gfx/icons/edit.svg") no-repeat 50%;
      }

      .wcMute, .wcUnMute {
        background: transparent url("../../gfx/icons/mute.svg") no-repeat 50%;
      }

      .wcBan {
        background: transparent url("../../gfx/icons/ban.svg") no-repeat 50%;
      }

      .wcSpam {
        background: transparent url("../../gfx/icons/spam.svg") no-repeat 50%;
      }

      .wcReply {
        background: transparent url("../../gfx/icons/reply.svg") no-repeat 50%;
      }


    }
  }

  .wcPopup-overlay.wcEmoticonsPopup-overlay {
    background: none;
  }

  .wcEmoticonsPopup-content {
    background-color: #f7f7f7;
    height: 280px;
    text-align: center;
    padding: 10px 5px;

    .wcAddonsLibrary {
      display: flex;
      flex-direction: column;
      height: 100%;

      .wcCategories {
        display: flex;
        justify-content: center;
        margin-bottom: 7px;
        .wcCategoryButton {
          transition: all .2s ease-in;
          opacity: 0.4;

          &:not(:last-child) {
            margin-right: 5px;
          }

          &:hover, &.wcCategoryButtonActive {
            opacity: 1;
          }
        }
      }
      .wcCategory {
        flex-grow: 1;
      }
    }

    .wcCategory.wcCategoryEmoticons {
      a {
        display: inline-block;
        border: none;
        line-height: 28px;
        border-radius: 50%;
        text-decoration: none;
        outline: none;
      }

      a img {
        border: none;
        border-radius: 0;
        margin: 3px;
        padding: 0;
        max-width: 28px;
      }
    }
  }

  [role=tooltip].wcColorsPopup-content {
    background-color: #f7f7f7;
    width: 220px;
    height: 157px;
    text-align: center;
    padding: 5px 5px;
    line-height: 12px;
    overflow: hidden;

    a {
      display: inline-block;
      text-decoration: none;
      outline: none;
      height: 12px;
      width: 12px;
      border: 1px solid #000;
      margin: 2px;
      cursor: pointer;
      line-height: 12px;
      border-radius: 3px;
    }

    a:hover {
      border-color: #a6a6a6;
    }
  }

  [role=tooltip].wcInfoWindowPopup-content {
    background-color: #f7f7f7;
    width: 350px;
    height: 170px;
    padding: 5px 5px;
    line-height: 1.1em;

    .wcContent {
      display: flex;

      .wcLeft {
        flex-grow: 0;

        img {
          border-radius: 50%;
          box-shadow: none;
          border: none;
          vertical-align: middle;
          margin-right: 10px;
          max-width: 90px;
        }
      }
      .wcRight {
        flex-grow: 1;

        .wcName {
          font-size: 1.1em;
          outline: 0;
        }

        .wcDetails {
          margin-top: 5px;
        }
      }
    }

    a {

    }

    a:hover {

    }
  }

  [role=tooltip].wcRecentPopup-content {
    background-color: #f7f7f7;
    width: 400px;
    height: 250px;
    padding: 5px 5px;

    @include recent;
  }

  [role=tooltip].wcReactionsPopup-content {
    background-color: #f7f7f7;
    width: auto;
    padding: 5px 5px;
  }

  .wcDebugPopup-content {
    .wcDebugPopupBody {
      display: flex;
      flex-direction: column;
      height: 100%;
      .wcLogs {
        overflow-y: auto;
        flex-grow: 1;
        border: 1px solid #dfdfdf;
        padding: 5px;
      }
      .wcFooter {
        padding-top: 10px;
        text-align: right;
      }
    }
  }
}