@mixin lightgray {
  @include lightgray-common;

  .wcClassic {
    border: 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
    background: #f7f7f7;

    .wcTitle {
      padding: 10px 13px; font-size: 150%; color: #151618;

      background: #e4e4e4 !important; /* Old browsers */
      background: -moz-linear-gradient(top,  #e4e4e4 0%, #d9d9d9 100%) !important; /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  #e4e4e4 0%,#d9d9d9 100%) !important; /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  #e4e4e4 0%,#d9d9d9 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#d9d9d9',GradientType=0 ) !important; /* IE6-9 */
    }

    .wcLoadingContainer, .wcAuthContainer {
      padding: 0;
    }

    // desktop:
    &.wcDesktop {
      .wcBody {
        // messages area:
        .wcMessagesArea {
          .wcTabsContainer {
            background-color: #ededed;

            .wcTabs {
              .wcTab {
                &.wcCurrent {
                  border-bottom: 3px solid transparent;
                  background: #f9fafb;
                  border-radius: 5px 5px 0 0;

                  &:first-child {
                    border-top-left-radius: 0;
                  }
                }

                .wcName {
                  font-size: 16px;
                  padding-top: 4px;
                  padding-bottom: 4px;
                }
              }
            }

          }

          .wcCustomizations {
            padding: 0 2% 2% 2%;
            background-color: #f7f7f7;
          }

          .wcGrid .wcGridChannelContainer {
            .wcGridChannel {
              border-color: #e4e4e4;
              border-radius: 5px 5px 0 0;

              .wcHeader {
                background: #e4e4e4 !important; /* Old browsers */
                background: -moz-linear-gradient(top, #e4e4e4 0%, #d9d9d9 100%) !important; /* FF3.6-15 */
                background: -webkit-linear-gradient(top, #e4e4e4 0%, #d9d9d9 100%) !important; /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(to bottom, #e4e4e4 0%, #d9d9d9 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#d9d9d9', GradientType=0) !important; /* IE6-9 */
                border-radius: 5px 5px 0 0;
              }
            }

            &.wcFocused .wcGridChannel {
              border: 1px solid rgba(0, 213, 255, 0.30);
              box-shadow: 0 0 7px rgba(0, 213, 255, 0.30);
            }
          }
        }

        // browser area:
        &.wcBrowserAreaRight {
          .wcMessagesArea {
            padding-left: 0;
            padding-right: 0;
          }
        }

        &.wcBrowserAreaLeft {
          .wcMessagesArea {
            padding-left: 0;
            padding-right: 0;
          }
          .wcBrowserArea {
            padding-right: 2%;
            padding-left: 1%;
          }
        }

        .wcBrowserArea {
          background-color: #ededed;
        }
      }
    }
  }

  .wcMobile, .wcSidebar.wcMobile {
    .wcContent {
      padding-left: 0;
      padding-right: 0;
    }
    .wcTabs {
      background-color: #ededed;
      .wcTab {
        padding-bottom: 6px;
        padding-top: 6px;

        .wcName {
          font-size: 16px;
        }
        border-bottom: 0;
        &.wcCurrent {
          border-bottom: 0;
          background-color: #f9fafb;
          border-radius: 5px 5px 0 0;
        }

        .wcRedCounter {
          width: 22px;
          height: 22px;
          font-size: 1em;
        }
      }

      .wcTabContent {
        .wcChannel {
          padding-left: 1%;
          padding-right: 1%;
        }
      }
    }

    .wcTabContent {
      .wcChannel {
        .wcChannelIntro {
          background-color: transparent;
          margin-top: 0;
          margin-bottom: 1%;
          padding: 0 0 2% 0;
        }
      }
      .wcChannelEntry {
        padding: 5px 10px 5px 10px;

        &:focus, &:active, &:hover {
          background-color: rgba(9, 193, 121, 0.10);
        }
      }

      .wcBrowser {
        padding-top: 0;
        background-color: #f7f7f7;

        .wcChannels {
          .wcChannelTrigger {
            &:hover {
              background-color: rgba(9, 193, 121, 0.10);
            }
          }
        }
      }

      .wcRecentChats {
        .wcHeader {
          font-size: 1.1em;
          color: #444;
          padding-left: 10px
        }

        .wcRecent {
          padding: 5px 10px 5px 10px;

          .wcRight .wcHead {
            margin-bottom: 0;
          }
        }
      }

      .wcCustomizations {
        padding-left: 2%;
        padding-right: 2%;
      }

    }
  }

  .wcMobile.wcSizeXXs {
    .wcTabs.wcTabsCompact {
     // padding-top: 6px;
      //padding-bottom: 6px;
      .wcTab {
        //background-size: contain;
      }
    }
  }

  .wcSidebar .wcColumn {
    > * {
      border-color: #e4e4e4;
    }

    &.wcFocused>:first-child {
      border-top: none;
      > span {
        font-weight: bold;
      }
    }

    .wcHeader {
      height: 2.6em;
      background: #e4e4e4 !important; /* Old browsers */
      background: -moz-linear-gradient(top,  #e4e4e4 0%, #d9d9d9 100%) !important; /* FF3.6-15 */
      background: -webkit-linear-gradient(top,  #e4e4e4 0%,#d9d9d9 100%) !important; /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(to bottom,  #e4e4e4 0%,#d9d9d9 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4', endColorstr='#d9d9d9',GradientType=0 ) !important; /* IE6-9 */
      border-radius: 5px 5px 0 0;

    }

    .wcContent {
      background-color: #f7f7f7;
      &.wcBrowserContent .wcCustomizations {
        background-color: #ededed;
      }
      .wcChannel {
        .wcChannelIntro {
          background-color: transparent;
        }
      }
    }

    .wcRecentTrigger span {
      top: 10px;
    }
  }
  
  // common:
  .wcCustomizations {
    a, a:hover {
      color: #151618; outline: none;
    }
  }

  .wcCounter {
    font-size: 10px;
  }

  .wcBrowser {
    .wcChannels {
      .wcLabel {
        font-weight: bold;
      }
      .wcChannelTrigger {
        color: #151618;

        &.wcUnLockedChannel .wcDetails .wcName {
          background-image: url("../../gfx/themes/lightgray/gfx/lock-semi.svg");
        }
        &.wcLockedChannel .wcDetails .wcName {
          background-image: url("../../gfx/themes/lightgray/gfx/lock-full.svg");
        }

        &:hover {
          background-color: rgba(9, 193, 121, 0.15);
          border-radius: 5px;
        }
      }

      .wcLabel {
        font-size: 1.1em;
        color: #444;
      }
    }

    background-color: #ededed;
    color: #151618;

    .wcCounter {
      font-size: 10px;
    }

    .wcFooter {
      border-top: none;
      padding: 5px 5px 5px 10px;

      .wcSearch {
        background-color: #FFF;
        border-radius: 15px;
        background-position: 10px center;

        input {
          height: 40px;
          margin-left: 30px;
        }
      }
    }
  }

  .wcChannel {
    .wcChannelIntro {
      border: none;
      border-bottom: 1px solid #ededed;
      padding: 10px;
      margin-top: 0;
      background-color: #f9fafb;
      .wcAvatar {
        border-radius: 5px;
        max-height: 60px;
      }
    }

    .wcChannelData .wcMessages {
      color: #111;
      background: #f7f7f7;
      margin-bottom: 2%;

      .wcMessage {
        padding-left: 2%;
        padding-right: 2%;

        a {
          color: #00d5ff;
          text-decoration: none;
          &:hover {
	        text-decoration: underline;
          }
        }

        .wcUser {
          line-height: 22px;
          color: #151618;
          text-decoration: none;
        }

        .wcTime {
          &, & * {
            color: #8a8e95; line-height: 22px;
          }
        }

        .wcContent {
          background-color: #FFF; border-radius: 0 10px 10px 10px; box-shadow: 2px 2px 2px rgba(60,60,60,0.03);

          .wcReactionsButtons .wcReactionButton {
            span {
              /*color: #00bdde ;*/
            }
          }
          .wcActionsButton {
            border-radius: 5px;
          }
        }

        .wcRowBody .wcContent .wcQuote {
          border-left-color: #45e3ff;
          background-color: #f8f8f8;
          border-radius: 0 10px 0 0;
        }

        .wcRowBody .wcContent {
          flex-grow: 0;
          min-width: auto;
          .wcInternalContent {
            display: inline;
          }
          &.wcEditing {
            .wcInternalContent, .wcTime {
              display: none;
            }
          }
          > .wcTime {
            margin-left: 10px;
            float: right;
          }
        }

        &.wcCurrentUser {
          .wcContent {
            background-color: #ececec; box-shadow: 2px 2px 2px rgba(60,60,60,0.13);
          }
          .wcRowBody .wcContent .wcQuote {
            background-color: #e6e6e6;
          }
          .wcRowHead .wcUser {
            color: #444;
          }
        }

        &.wcBatch {
          .wcRowHead {
            display: none;
          }
          .wcRowBody {
            > .wcAvatar {
              visibility: hidden;
            }
            .wcContent {
              border-radius: 10px;
            }
          }
        }
      }
    }

    .wcCounter {
      padding: 0 2% 1% 2%;
    }

    &.wcChannelSizeXXs {
      .wcChannelInput .wcInputs .wcInputButtons button.wcSubmit {
        background: #00bdde url(../../gfx/icons/send.svg) no-repeat center center !important;
        background-size: 25px 25px !important;
      }
    }

    .wcChannelInput {
      background-color: #f7f7f7;
      padding: 0 2% 2% 2%;

      .wcCurrentUserName {
        padding-bottom: 7px;
        font-weight: bold;
        color: #444;
      }

      .wcReplyTo {
        background-color: #e6e6e6;
      }

      .wcInputs {
        .wcInputButtons {
          .wcInputButton {

            border-radius: 0;
            border: none;
            box-shadow: none;
            height: 40px;
            background: #ffffff;
            display: inline-block;
            outline: none;

            -webkit-transition: all 250ms cubic-bezier(0.62, 0.155, 0.47, 0.86);
            -o-transition: all 250ms cubic-bezier(0.62, 0.155, 0.47, 0.86);
            transition: all 250ms cubic-bezier(0.62, 0.155, 0.47, 0.86);


            &:hover, &:hover > * {
              cursor: pointer;
            }

            &.wcImageAttachment {
              background: #ffffff url('../../gfx/themes/lightgray/gfx/camera.svg') center center no-repeat;
            }

            &.wcFileAttachment {
              background: #ffffff url('../../gfx/themes/lightgray/gfx/attach.svg') center center no-repeat;
              cursor: pointer;
            }

            &.wcEmoticon {
              background: #ffffff url('../../gfx/themes/lightgray/gfx/emoticon.svg') center center no-repeat;
            }

            &.wcSoundAttachmentStart {
              background: #ffffff url(../../gfx/icons/mic.svg) center center no-repeat;
            }

            &.wcSoundAttachmentStop {
              background: #ffffff url(../../gfx/icons/stop-button.svg) center center no-repeat;
            }

            &:focus, &:active, &:hover {
              background-color: rgba(9, 193, 121, 0.15);
              border: none;
            }
          }

          .wcInputButtonSupplementary {
            background-color: #ffffff;
            height: 40px;
          }
        }

        div.wcInput {
          border-radius: 15px 0 0 15px; min-height: 40px; box-shadow: none;
          background-color: #ffffff; color: #111; margin: 0; outline: 0 none;
          padding: 7px 5px 7px 15px;
          border: none;
          &:focus {
            background-color: #ffffff; border: none;
          }
        }

        .wcSubmit {
          border-radius: 0 15px 15px 0 !important
        }
      }

      .wcAttachments {
        .wcAttachment {
          .wcDelete {
            border-color: #b8bcc4;
            &:hover {
              background-color: #e3e3e3;
            }
          }
        }
      }
    }
  }

  .wcRecentTrigger {
    &:hover {
      background-color: rgba(9, 193, 121, 0.15);
    }

    span {
      font-size: 11px;
      font-weight: bold;
    }
  }
}

@mixin lightgray-global {

  [role=tooltip].wcPopup-content.wcLightgrayTheme-content,
  [role=dialog].wcPopup-content.wcLightgrayTheme-content {
    @include lightgray-common;

    border-color: #e1e8ed;
    //box-shadow: 2px 2px 15px rgba(60,60,60,0.1);
    box-shadow: 0 0 15px rgba(60, 60, 60, 0.2);
    border-radius: 15px;
    overflow: hidden;

    > .wcBody {
      background-color: #FFF !important;
      padding-top: 20px;
      padding-bottom: 20px;
    }

    > .wcHeader, > .wcFooter {
      background: #f1f1f1 !important;
      border: none;
    }
    > .wcHeader {
      color: #151618;
      h5 {
        font-size: 1.1em;
        font-weight: bold;
      }
    }
    > .wcFooter {
      .wcButton {
        color: #151618;
      }
    }

    .wcRecentChats {
      .wcHeader {
        font-size: 1.1em;
        font-weight: bold;
        color: #444;
      }
      .wcRecent {
        .wcRight .wcHead {
          margin-bottom: 0;
          .wcName {
            color: #444;
          }
        }
      }
    }
  }

  .wcActionsPopup-content.wcLightgrayTheme-content {
    border-radius: 15px;

    .wcActions {
      .wcAction {
        border-color: #b8bcc4;

        &:hover {
          background-color: rgba(9,193,121,.15);
        }
      }

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

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

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

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

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

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

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

  .wcEmoticonsPopup-content.wcLightgrayTheme-content {
    .wcCategory.wcCategoryGIFs .wcTenor .wcTenorSearch {
      border-radius: 15px;
    }
  }

  .wcInfoWindowPopup-content.wcLightgrayTheme-content {
    background: #FFF !important;
    height: 120px;

    .wcContent .wcRight {
      .wcName {
        font-size: 1.3em;
        text-decoration: none;
      }
    }
  }
  .wcRecentEmpty-content.wcLightgrayTheme-content {
    height: 100px;
    .wcRecentChats {
      display: flex;
      align-items: center;
    }
  }
}

@mixin lightgray-common {
  --wc-font-color: #151618;
  --wc-link-color: #00d5ff;

  &, * {
    font-family: 'Maven Pro', sans-serif;
    font-size: 13px;
    line-height: 22px;
    color: var(--wc-font-color);
  }

  a {
    color: var(--wc-link-color);
    box-shadow: none;
  }

  .wcIcon {
    background-color: #a6a6a6;
  }

  button.wcButton, button.wcButton:focus, button.wcButton:active,
  input[type="button"].wcButton, input[type="button"].wcButton:focus, input[type="button"].wcButton:active,
  input[type="submit"].wcButton, input[type="submit"].wcButton:focus, input[type="submit"].wcButton:active {
    border-radius: 15px !important; background-image: none; background-repeat: no-repeat; border: 0!important;
    color: #FFF !important; padding: 5px 20px !important; box-shadow: none; font-weight: normal !important; line-height: 20px !important;
    height: 40px; outline: none; min-height: 40px !important;

    background: #00d5ff !important; /* Old browsers */
    background: -moz-linear-gradient(top,  #00d5ff 0%, #00bdde 100%) !important; /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #00d5ff 0%,#00bdde 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #00d5ff 0%,#00bdde 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d5ff', endColorstr='#00bdde',GradientType=0 ) !important; /* IE6-9 */

    text-transform: none !important;

    -webkit-transition: all 250ms cubic-bezier(0.62, 0.155, 0.47, 0.86);
    -o-transition: all 250ms cubic-bezier(0.62, 0.155, 0.47, 0.86);
    transition: all 250ms cubic-bezier(0.62, 0.155, 0.47, 0.86);

    &.wcButtonDanger {
      color: #fff !important;
      background: #dc3545 !important;
      border-color: #dc3545 !important;
      &:hover {
        background: #ff0000 !important;
      }
    }
  }

  input[type="text"].wcControl, input[type="password"].wcControl, textarea.wcControl {
    height: 40px; line-height: 40px; box-shadow: none;
    background-color: #ffffff; color: var(--wc-font-color);; border-radius: 15px; margin: 0; outline: 0 none;
    padding: 4px 4px 4px 15px;
    border: none;
  }

  input[type="text"]:focus.wcControl, input[type="password"]:focus.wcControl, textarea:focus.wcControl {
    background-color: #ffffff; border: none;
  }

  ::placeholder {
    color: #66696e;
    font-family: 'Maven Pro', sans-serif;
  }

  input[type="button"].wcSubmit {
      border-radius: 0 15px 15px 0 !important;
  }

  progress, progress[role][aria-valuenow] {
	background: #b8bcc4 !important;
  }

  progress::-webkit-progress-bar {
    background: #b8bcc4;
  }

  progress {
    color: #00d5ff;
  }

  progress::-moz-progress-bar {
    background: #00d5ff;
  }

  progress::-webkit-progress-value {
    background: #00d5ff;
  }

  progress[aria-valuenow]:before  {
    background: #00d5ff;
  }

  @media screen and (-webkit-min-device-pixel-ratio:0) {
    * {
      select,
      textarea,
      button,
      input {
        font-size: 16px;
      }
    }
  }

  .wcErrorBox {
    border-radius: 5px;
    background-color: #ffe9e9;
    border: none;
  }

  /*
  // forms:
  .wcFormControl, .wcFormControl:hover, .wcFormControl:active {
    color: #111;
  }

  .wcFormControl:focus {
    color: #111;
    border-color: #00d5ff;
    box-shadow: 0 0 0 0.25rem rgba(0, 213, 255, 0.29);
  }

  .wcFormCheck {
    &:checked {
      background-color: #00d5ff;
      border-color: #00d5ff;
    }
  }

   */

}