/**
 * Buttons layout
 */
.variants-buttons {
  .unitize(padding-top, 7);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -4px;
  margin-bottom: -4px;
}

.variant-button {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 4px;
  margin-right: 4px;
  flex-basis: calc(~'@{mlvp-buttons-width-mobile} - 4px');
  box-sizing: border-box;
  background: #fff;
  border: 1px solid @border-color;
  border-radius: 3px;
  padding: 8px;
  .unitize(font-size, 12);
  font-weight: @font-bold-weight;
  color: @text-color;
  cursor: pointer;

  &:hover, &.js--selected {
    border-color: @brand-primary;
    color: @brand-primary;
  }

  &.is--unavailable {
    opacity: .75;
    background-color: rgba(0,0,0,.05);
    border-color: @border-color;
    color: @text-color;
  }
}

.variants-buttons--shorten-names {
  .variant-button {
    overflow: hidden;
  }

  .variant-button--name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

.variant-button--image img {
  margin: 0 auto;
  max-width: 100%;
  .unitize(max-height, 30);
  width: auto;
}


@media screen and (min-width: @tabletViewportWidth) {

  .box--basic .variants-buttons .variant-button {
    flex-basis: calc(~'@{mlvp-buttons-width-box-basic} - 4px');
  }

  .box--list .variants-buttons .variant-button {
    flex-basis: calc(~'@{mlvp-buttons-width-box-list} - 4px');
  }

  .box--image .variants-buttons .variant-button {
    flex-basis: calc(~'@{mlvp-buttons-width-box-image} - 4px');
  }

  .box--minimal .variants-buttons .variant-button {
    flex-basis: calc(~'@{mlvp-buttons-width-box-minimal} - 4px');
  }
}

.variants-buttons .variant-button.is--image {
  flex-basis: calc(~'@{mlvp-image-buttons-width-mobile} - 4px');
}

/**
 * small width w/ sidebar viewport
 */
@mlvpTabletSidebarMaxWidth: @tabletViewportWidth + 20em;

@media screen and (min-width: @tabletViewportWidth) and (max-width: @mlvpTabletSidebarMaxWidth) {
  .box--minimal .variants-buttons .variant-button.is--image {
    flex-basis: calc(~'@{mlvp-image-buttons-width-small} - 4px');
  }
}

@mlvpPhoneSidebarMaxWidth: @phoneLandscapeViewportWidth + 10em;

@media screen and (min-width: @phoneLandscapeViewportWidth) and (max-width: @mlvpPhoneSidebarMaxWidth) {
  .box--minimal .variants-buttons .variant-button.is--image {
    flex-basis: calc(~'@{mlvp-image-buttons-width-small} - 4px');
  }
}

@media screen and (min-width: @mlvpPhoneSidebarMaxWidth) {
  .box--minimal .variants-buttons .variant-button.is--image {
    flex-basis: calc(~'@{mlvp-image-buttons-width} - 4px');
  }
}