@import 'color';
@import 'fonts';
@import 'grid';
@import 'animation';


.streamitem{


  overflow: hidden;
  word-break: word-break;
  padding-top: 0em;
  padding-right: 0.3em;
  padding-bottom: 3em;

  header{

    color:$color2;
    background-color: $color5;
    a{
      display: block;
      position:relative;
    }
    picture{

      .avatar{
        width:45px;
        height:45px;
        background-position: center;
        backgrousnd-size: contain;
        border-radius: 50px;
        display:inline-flex;
        margin-left:0.3em;
        margin-top:0.7em;
      }
    }
    author{

      color:$color3;
      font-size:1.2em;
      position:absolute;
      top:0.7em;
      left:2.8em;

    }
    date{
      font-size:0.6em;
      left:5.3em;
      position:relative;
      top:-1.3em;
    }
    span {
      left:5.3em;
      position:relative;
      top:-1.3em;
      font-size:0.6em;
      &:hover{
        cursor: pointer;
      }
    }

    .actions{
      margin-top: 1em;
    }
  }

  .item{
      box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
      padding: 0px;
      background-color: $color3;
  }
  content{

    p,h2,h1,h3,span,code{
      margin: 1em;

    }

  }

}
.profile{
    .center{
      text-align: center;
    }

    h2{
      background-color: rgb(234,234,234,0.4);
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
      padding-left: 0.2em;
      padding-right: 0.2em;
    }

    min-height:400px;
    background-position: center;
    background-size: cover;
    &.settings{

      height:auto;

    }

    #avatar{
      margin-top:2em;
      display: inline-block;
      width:100px;
      height:100px;
      background-position: center;
      background-size: contain;
      border-radius: 50px;
    }

}

.action{
  .col-lg-4{
    text-align: center;
    font-size: 0.5em;
  }
  .close{
    margin-left:3em;
  }
  .icon-beer:before {

      width: 1.6em;
  }
  .icon-coffee:before {
      width: 1.4em;
  }
  .icon-like:before {
    width: 1.4em;
  }
  button{
    background-color: inherit;
    margin-bottom:  1em;
    transition: all .2s ease-in-out;
    box-shadow: none;
    &:hover{
      text-decoration: none;
      transform: scale(1.1);

    }
    &:active{
      color:$color2;
      border: none;
      outline: none;
    }
    @media screen and (max-width: $grid-mobile-breakpoint) {
      margin-bottom:  0.5em;
    }
  }

}

.autocomplete{
  div{
    line-height: 2em;
  }
  cursor: pointer;
  &:hover{
    background-color: $color2;
  }
}
.autocomplete.selected{
  cursor: none;
  &:hover{
    background-color: none;
  }
}
.avatar.small{
  height:50px;
  width:50px;
  background-position: center;
  background-size: contain;
  border-radius: 25px;

}
.group.slider{


  &:hover{
    cursor: pointer;

  }
  .preview{


    margin-left: 1em;
    height:175px;
    width:115px;
    background-position: center;
    background-size: contain;
    border-radius: 36px;
  }
  margin-bottom: 2em;

}
.group.preview.large{
  height:75px;
  width:75px;
  background-position: center;
  background-size: contain;
  border-radius: 36px;
}
.group.overview{
  .preview{
    &:hover{
      cursor: pointer;
    }
      margin-right: auto;
      margin-left: auto;
      height:150px;
      width:150px;
      background-position: center;
      background-size: contain;
      border-radius: 75px;
  }

  .col-lg-3{
    padding-top: 2em;
  }
}
#groupBox{
  button{
    width:100%;
    margin-bottom: 1em;
  }
  b{
    margin:1em;
    width:100%;
    display: inline-block;
  }
  .membership{
    margin-top: 2em;
    background-color: $color2;
    display: inline-block;
    div{
      margin:1em;
    }

    p{
      color:$color3;
    }
  }
  .user{
    width: 33%;
    float: left;

    .avatar{
      width:50px;
      height:50px;
      background-position: center;
      background-size: contain;
      border-radius: 25px;
    }
  }
}
.editor-container{
  padding: 2em;
  z-index:9999;
  @media screen and (max-width: $grid-mobile-breakpoint) {
    padding:  0em;
    padding-top:1em;
    padding-bottom:1em;
  }
}
.editor{
  width: 100%;
  background-color: $color1;
  padding: 1em;
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  @media screen and (max-width: $grid-mobile-breakpoint) {
    min-height:150px;
    padding: 0em;
    margin:0em;
  }
  border: 1px #ccc solid;
  code{
   background-color:   $color2;
  }
  div{
    &:focus{
      outline: none;
    }
    margin-top:0em;
    padding-top:0em;
    min-height:110px;
  }
}
.menubar{
  button{
    font-size: 0.5em;
  }
}
.comment-container{
  .editor-container{
    padding: 0em;
    padding-bottom: 2em;

    @media screen and (max-width: $grid-mobile-breakpoint) {
      padding:  0em;

    }
  }
}
.comment-list{

  border:1px solid #ccc;
  margin-bottom: 2em;
}
.comment{
  width:100%;
  display: block;
  padding-top: 1em;
  margin:1em;
  .action{
    font-size: 0.8em;
  }
}


iframe{
  width:100%;
}
