@import "./globals/streams";

@mixin globals {
  // variables:
  --wc-z-index: 200000;

  --wc-font-color: inherit;
  --wc-form-font-color: inherit;
  --wc-link-color: inherit;
  --wc-bg-color: #fff;

  // forms:
  --wc-color-table-border: #dee2e6;;
  --wc-color-form-border: #999;
  --wc-color-form-focus: rgba(206, 212, 218, 0.39);
  --wc-color-form-checked: #c1c1c1;
  --wc-color-form-validation-error: #dc3545;
  --wc-color-form-validation-error-focus: rgba(220,53,69,.25);

  * {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  /* commons: */
  .wcInvisible, &.wcInvisible {
    display: none !important;
  }

  .wcHidden {
    visibility: hidden;
  }

  .wcLeft {
    float: left;
  }

  label {
    width: auto;
    display: inline;
  }

  a.wcFunctional, a.wcFunctional:focus {
    outline: none;
    text-decoration: none !important;
    padding: 0;
    border: none;
    line-height: 12px;
    font-weight: normal;
    color: var(--wc-font-color) !important;
  }

  button.wcFunctional, button.wcFunctional:hover, button.wcFunctional:active, button.wcFunctional:focus {
    outline: none;
    padding: initial;
    border: none;
    line-height: 12px;
    font-weight: normal;
    border-radius: 0;
    width: auto;
    background: none;
  }

  img.wcFunctional {
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: inline;
    height: auto;
  }

  .wcButton {
    display: inline-block;
    &.wcButtonDanger {
      color: #fff;
      background-color: #dc3545;
      border-color: #dc3545;
    }
  }

  .wcCenter {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
  }

  progress.wcMainProgressBar {
    width: 100%;
    font-size: 1em;
  }

  a.wcDebugLink {
    color: #f00;
  }

  img.wcChannelAvatar {
    max-width: 25px;
    margin: 0 4px 2px 0;
    border-radius: 50%;
    box-shadow: none;
    border: none;
    display: inline-block;
    vertical-align: middle;
    flex-grow: 0;
  }

  a.wcChannelClose {
    width: 17px;
    height: 17px;
    background: transparent url(../../gfx/icons/x.svg) no-repeat 50%;
    background-size: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #A6A6A6;
    border-radius: 50%;
    margin-left: 8px;
    text-decoration: none;
    transition: all .2s ease-in;

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

  span.wcUnreadMessagesCount {
    background-color: rgba(212, 19, 13, 1);
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
    margin-left: 5px;
  }

  /* Progress bar cross-browser styling */
  progress, progress[role] {
    height: 5px;
    margin-top: 10px;
    line-height: 5px;
    display: block;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    border: none;
    background-size: auto;
  }

  progress[role]:after {
    background-image: none;
  }

  progress[role] strong {
    display: none;
  }

  /* Progress bar - background */
  progress, progress[role][aria-valuenow] {
    background: #ccc !important;
  }

  progress::-webkit-progress-bar {
    background: #ccc;
    border-radius: 5px !important;
  }

  /* Progress bar - foreground */
  progress {
    color: #5789FF;
    border-radius: 5px !important;
  }

  progress::-moz-progress-bar {
    background: #5789FF;
    border-radius: 5px !important;
  }

  progress::-webkit-progress-value {
    background: #5789FF;
    border-radius: 5px !important;
  }

  progress[aria-valuenow]:before {
    background: #5789FF;
    border-radius: 5px !important;
  }

  .wcErrorBox {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #dfdfdf;

    &:before {
      content: '';
      margin-right: 5px;
      width: 23px;
      height: 20px;
      background: url("../../gfx/icons/warnings.svg") 0px 0 no-repeat;
    }
  }

  .wcCounter {
    font-size: 80%;
  }

  .wcRedCounter {
    color: #ffffff !important;
    background-color: #ff0000;
    font-size: .6em;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    margin-left: 5px;
    width: 22px;
    height: 22px;
  }

  .wcStatus {
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 50%;

    &.wcOnline {
      background: rgb(9, 193, 121);
    }
    &.wcOffline {
      background: rgba(244, 31, 31, 0.5);
    }
  }

  .ScrollbarsCustom-Scroller {
    overscroll-behavior: contain;
  }

  //loader:
  .wcLoaderContainer {
    display: flex;
    flex-direction: row;
    align-items: center;

    &.wcLoaderContainerCenter {
      justify-content: center;
    }

    .wcLoader {
      display: inline-block;
      position: relative;
      width: 32px;
      height: 32px;
    }

    .wcLoader div {
      box-sizing: border-box;
      display: block;
      position: absolute;
      width: 26px;
      height: 26px;
      margin: 4px;
      border: 4px solid #A6A6A6;
      border-radius: 50%;
      animation: wcLoader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
      border-color: #A6A6A6 transparent transparent transparent;
    }

    &.wcSpinner {
      display: inline;
      .wcLoader {
        width: 1em;
        height: 1em;
        div {
          width: 1em;
          height: 1em;
          border-width: 2px;
          margin: 2px;
        }
      }
    }

    .wcLoader div:nth-child(1) {
      animation-delay: -0.45s;
    }

    .wcLoader div:nth-child(2) {
      animation-delay: -0.3s;
    }

    .wcLoader div:nth-child(3) {
      animation-delay: -0.15s;
    }

    @keyframes wcLoader {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .wcLoaderText {
      font-size: .8em;
      line-height: .8em;
      margin-left: 2px;
    }

  }

  @include global-streams;

  .wcFlex {
    display: flex;
  }
  .wcFlexWrap {
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .wcFlexAlignCenter {
    align-items: center;
  }

  // heights:
  .wcHeight10 {
    height: 10rem;
  }
  .wcHeight15 {
    height: 15rem;
  }
  .wcHeight4 {
    height: 4rem;
  }
  .wcHeight1 {
    height: 1rem;
  }

  // paddings:
  .wcPadding1 {
    padding: 0.25rem;
  }
  .wcPadding2 {
    padding: 0.5rem;
  }
  .wcPadding3 {
    padding: 1rem;
  }
  .wcPadding4 {
    padding: 1.5rem;
  }

  // margins:
  .wcMargin1 {
    margin: 0.25rem;
  }
  .wcMarginRight1 {
    margin-right: 0.25rem;
  }
  .wcMarginRight2 {
    margin-right: 0.5rem;
  }
  .wcMarginRight3 {
    margin-right: 1rem;
  }
  .wcMarginBottom1 {
    margin-bottom: 0.25rem;
  }

  // max widths:
  .wcMaxWidth2 {
    max-width: 2rem;
  }

  // icons:
  .wcIcon {
    background-size: 100% 100%;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 0;
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    &.wcIconPlus {
      background-color: #A6A6A6;
      mask-image: url(../../gfx/icons/plus.svg);
      mask-size: cover;
    }
    &.wcIconGear {
      background-color: #A6A6A6;
      mask-image: url(../../gfx/icons/gear.svg);
      mask-size: cover;
    }
    &.wcIconEdit {
      background-color: #A6A6A6;
      mask-image: url(../../gfx/icons/edit.svg);
      mask-size: cover;
    }
    &.wcIconX {
      background-color: #A6A6A6;
      mask-image: url(../../gfx/icons/x.svg);
      mask-size: cover;
    }
    &.wcIconTimes {
      background-color: #A6A6A6;
      mask-image: url(../../gfx/icons/times.svg);
      mask-size: cover;
    }
    &.wcIconTick {
      background-color: #A6A6A6;
      mask-image: url(../../gfx/icons/tick.svg);
      mask-size: cover;
    }
    &.wcIconZoom {
      background-color: #A6A6A6;
      mask-image: url(../../gfx/icons/zoom.svg);
      mask-size: cover;
    }
    &.wcIconEmotion {
      background-color: #A6A6A6;
      mask-image: url(../../gfx/icons/emoticon.svg);
      mask-size: cover;
    }
    &.wcIconGif {
      background-color: #A6A6A6;
      mask-image: url(../../gfx/icons/gif.svg);
      mask-size: cover;
    }
    &.wcIconProhibited {
      background-color: #A6A6A6;
      mask-image: url(../../gfx/icons/prohibited.svg);
      mask-size: cover;
    }

    &.wcIconSm {
      width: 18px;
      height: 18px;
    }
    &.wcIconXs{
      width: 14px;
      height: 14px;
    }

  }

  .wcTable {
    width: 100%;
    vertical-align: top;
    caption-side: bottom;
    border-collapse: collapse;
    border-color: var(--wc-color-table-border);

    > tbody {
      vertical-align: inherit;
    }

    tbody, td, tfoot, th, thead, tr {
      border-color: inherit;
      border-style: solid;
      border-width: 0;
      text-align: left;
    }

    >:not(caption)>*>* {
      padding: .5rem .5rem;
      border-bottom-width: 1px;
    }
  }

  // secondary tabs:
  .wcSecondaryTabs {
    display: flex;
    flex-direction: row;
    .wcSecondaryTab {
      flex-grow: 1;
      padding: 1em;
      &, &:focus, &:active {
        outline: 0;
        text-decoration: none;
        margin: 0;
        text-align: center;
        color: var(--wc-font-color);
      }
      &.wcSecondaryTabCurrent {
        font-weight: bold;
        background-color: #f1f1f1;
        .wcRedCounter {
          font-weight: normal;
        }
      }
      .wcRedCounter {
        font-size: 1em;
      }
    }
  }

  // primary tabs:
  .wcPrimaryTabs {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 5px;
    list-style: none;
    border-bottom: 1px solid var(--wc-color-form-border);

    .wcPrimaryTabItem {
      .wcPrimaryTabLink {
        display: block;
        padding: .5rem 1rem;
        color: var(--wc-link-color);
        text-decoration: none;
        outline: none;
        transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
        margin-bottom: -1px;
        background: 0 0;
        border: 1px solid transparent;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;

        &.wcPrimaryTabItemActive {
          color: var(--wc-font-color);
          border-color: var(--wc-color-form-border) var(--wc-color-form-border) var(--wc-bg-color);
        }

        .wcRedCounter {
          font-weight: normal;
          font-size: 1em;
        }
      }
    }
  }

}