Kalkuli/2018.2-Kalkuli_Front-End

@import "../../../assets/sass/main";

.compare-area {
  height: 80%;
  width: auto;
  &__buttons {
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    margin-top: 3rem;
  }
  &__content {
    display: flex;  
    flex-flow: column;
    align-items: center;
    padding-top: 3rem;
    //height: 80%;
    //justify-content: space-around;
    width: 90%;
    margin-left: 1.5em;

    &__input-area {
      display: flex;
    }

    &__labels {
      display: flex;

      &__label {
        width: auto;
        font-size: 1.5rem;
        padding-top:1em;
        padding-bottom: 1em;
      }
    }  
  }

  &__comparing {
    width: 80rem;
    display: flex;
    flex-flow: row;
    justify-content: space-around;
    align-items: center;

    &__preview {
      text-align: center;
      flex-flow: column wrap;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 29rem;
      height: 47rem;
      border: 2px solid $color-black;
    }
  }

  &__tag-area {
    width: 100%;
    margin-top: 1.2rem;
    display: flex;
    flex-flow: column wrap;
    align-items: center;

    &__line {
      width: 90%;
      height: 1.2px;
      background: black;
      background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), to(transparent), color-stop(50%, $color-black));
    }
    
    &__title {
      font-size: 1.5rem;
      margin: 1.6rem 0;
    }
  }
}

.pdf-preview {
  border: 2px solid $color-black;
}

@media (max-width:650px) {
  
  .compare-area {
    &__tag-area {
      margin-top: .8rem;
    }

    &__comparing {
      width: 20rem;
      display: flex;
      flex-flow: row;
      justify-content: center;
      align-items: center;
    }

    &__content__labels__label {
      font-size: 1.2rem;
    }
  }
}