/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 3 of the License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/

/*================= Stream page =================*/

#parentSocialPage {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: inline;

  > div {
    padding: 25px 25px 0;
  }

  .v-application {
    &:not(.hiddenable-widget) {
      margin-bottom: 22px;
    }
    &.hiddenable-widget > .v-application--wrap > div {
      margin-bottom: 22px;
    }
  }

  .UIMobileSwipeParentContainer {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width:100%;

    > div {
      width:100%;
    }

    > #leftSocialPage, > .leftSocialPage {
      flex: 0 1 70%;
      max-width: 70%;
      box-sizing: border-box;
      padding-right: 10px ~'; /** orientation=lt */ ';
      padding-left: 10px ~'; /** orientation=rt */ ';
    }

    > #rightSocialPage, > .rightSocialPage {
      flex: 0 1 30%;
      max-width: 30%;
      box-sizing: border-box;
      padding-left: 10px ~'; /** orientation=lt */ ';
      padding-right: 10px ~'; /** orientation=rt */ ';

      /* Added for sticky container */
      .UIContainer, .NormalContainerBlock, .VIEW-CONTAINER, .UIIntermediateContainer, .UIRowContainer {
        display: inline;
      }
    }
  }
}

#UIEditInlineWS {
  #parentSocialPage .UIMobileSwipeParentContainer {
    > #rightSocialPage, .rightSocialPage {
      .UIContainer, .NormalContainerBlock {
        display: block;
      }
    }
  }
}

.profile-after-about-me-container {
  .UIRowContainer {
    display: flex;

    > div:first-child {
      margin-right: 20px ~'; /** orientation=lt */ ';
      margin-left: 20px ~'; /** orientation=rt */ ';
      min-width: 65%;
      min-height: 100%;
      height: 174px;
      max-height: 174px;
      flex: 1 1 auto;
    }
    > div:nth-child(2) {
      width: 100%;
      min-height: 100%;
      height: 174px;
      max-height: 174px;
      flex: 1 1 auto;
    }
  }
}

#singlePageApplicationContainer, .singlePageApplication {
  max-width: 100%;
}

@media (min-width: @minLargeDesktop) {
  #singlePageApplicationContainer, .singlePageApplication {
    padding: 20px 14%;
  }
}

@media (max-width: @maxDesktop) {
  #singlePageApplicationContainer, .singlePageApplication {
    margin: 22px auto 10px;
  }
  #SpacePage {
    margin: auto;
    max-width: ~"calc(100% - 22px)";
  }
}

@media (max-width: @maxDesktop) {
  .profile-after-about-me-container {
    .UIRowContainer {
      display: block;

      > div:first-child, > div:nth-child(2) {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        max-height: none;
        height: auto;
      }
    }
  }
}

@media (min-width: @minTabletWidth) {
  #parentSocialPage {
    .UIRowContainer:first-of-type {
      > #rightSocialPage, > .rightSocialPage {
        #stickyBlockDesktop, .stickyBlockDesktop, &.stickyBlockDesktop {
          position: sticky;
          top: 13px;
          height: auto;
          display: block;
          z-index: @zindexStickyContainer;
        }
      }
    }
  }
  .decrease-z-index #parentSocialPage .UIRowContainer:first-of-type {
    > #rightSocialPage, > .rightSocialPage {
      #stickyBlockDesktop, .stickyBlockDesktop, &.stickyBlockDesktop {
        z-index: 1;
      }
    }
  }
}