@import "/templates/definitions";

.basketpopup {
  position: fixed;
  z-index: 100;
  width:100%;
  pointer-events:none;
  &--visible{
    .basketpopup__inner {
      max-height: 500px;
    }
  }
  &__inner {
    float:right;
    max-width: 500px;
    background:#fff;
    text-align:left;
    pointer-events:all;
    box-shadow:0 0 20px rgba(0,0,0,.15);
    overflow:hidden;
    max-height:0;
    transition:max-height .7s ease;
  }
  &__header {
    padding:0.7rem 0.8rem;
    background:@color-primary;
    color:#fff;
    font-weight:@font-weight-bold;
    text-align:center;
  }
  &__content {
      padding: @gutter/2;
  }
  &__infotitle {
    font-weight: @font-weight-medium;
    margin-bottom: 0.2rem;
  }
  &__articles {
    margin-bottom:0.7rem;
  }
  &__article {
      display:flex;
      align-items:center;
      padding:0.5em 0;
      border-bottom:1px solid @color-lines;
      font-weight:@font-weight-medium;
  }
  &__image {
      flex:0 0 50px;
      img {
          max-width: 50px;
          max-height: 50px;
      }
  }
  &__title {
      flex: auto;
      word-break:break-word;
      padding:0 1rem;
      align-self: flex-start;
  }
  &__variant {
    margin-top:0.5rem;
    font-size:.75em;
  }
  &__infos {
    text-align:right;
    align-self: flex-start;
  }
  &__price {
    white-space:nowrap;
    margin-bottom:1em;
  }
  &__amount {
    font-size: .75em;
    white-space:nowrap;
  }
  &__totals {
    margin-bottom:0.4rem;
  }
  &__total {
    padding-bottom:.5em;
    display:flex;
    width:100%;
    &--morearticles {
      .basketpopup__totaltext {
        font-size:.75em;
      }
    }
    &--total {
      .basketpopup__totalvalue {
        font-weight:@font-weight-bold;
      }
    }
  }
  &__totaltext {
    flex:1 0 auto;
    font-weight:@font-weight-bold;
    color:#000;
  }
  &__totalvalue {
    text-align:right;
    font-weight:@font-weight-medium;
  }
  &__buttons {
    .basketpopup__button {
      display:block;
    }
  }
}