@import "./mobile/mobile";
@import "./desktop/desktop";
@import "../classic/mobile";

.wcContainerSidebar {
  width: 0;
  padding: 0;
  margin: 0;
  height: 0;
  border: none;

  .wcSidebar {
    position: fixed;
    z-index: var(--wc-z-index);
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    display: flex;

    .wcColumn {
      display: flex;
      justify-content: flex-end;
      flex-direction: column;

      & > * {
        pointer-events: auto;
        border-left: 1px solid #dfdfdf;
        border-right: 1px solid #dfdfdf;
        border-bottom: 1px solid #dfdfdf;
      }

      & > *:first-child {
        border-top: 1px solid #dfdfdf;
      }

      &.wcFocused > *:first-child {
        border-top: 2px solid #b6b3b3;
      }

      > :not(.wcBrowserContent) {
        padding-left: 10px;
        padding-right: 10px;
      }

      .wcAuthContainer {
        padding-top: 10px;
        padding-bottom: 10px;
      }

      .wcLoadingContainer {
        flex-grow: initial;
      }

      .wcHeader {
        cursor: default;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 130px;

        .wcContent {
          display: flex;
          align-items: center;
          flex-direction: row;
          background: transparent;
        }

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

          > *:not(:last-child) {
            //margin-right: 5px;
          }

          .wcMinimize {
            background: transparent url(../../gfx/icons/minus.svg) center center no-repeat;
            background-size: 24px 24px;
            padding: 0;
            width: 24px;
            height: 24px;
            display: inline-block;
          }
          .wcMaximize {
            background: transparent url(../../gfx/icons/plus.svg) center center no-repeat;
            background-size: 24px 24px;
            padding: 0;
            width: 24px;
            height: 24px;
            display: inline-block;
          }
          .wcClose {
            background: transparent url(../../gfx/icons/x.svg) center center no-repeat;
            background-size: 24px 24px;
            padding: 0;
            width: 24px;
            height: 24px;
            display: inline-block;
          }
        }
      }

      .wcContent {
        display: flex;
        flex-direction: column;

        .wcChannel {
          padding-bottom: 10px;
          flex-grow: 1;
        }
      }
    }

    &.wcMobile {
      @include classic-mobile;
      @include mobile;
    }

    &.wcDesktop {
      @include desktop;
    }
  }

  &.wcSidebarLeft .wcSidebar {
    left: 0;
    right: auto;
    flex-direction: row-reverse;
  }
}