.button-wrap {
  position: relative;
  display: -webkit-flex;
  display: flex;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: -20px;
}
.button-wrap > * {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  overflow: auto;
}
.button-wrap .gap-right {
  margin-right: auto;
}
.button-wrap .gap-left {
  margin-left: auto;
}
.button-wrap--justify-content-space-between {
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.button-wrap--justify-content-center {
  -webkit-justify-content: center;
  justify-content: center;
}
* + .button-wrap--has-dividing-line {
  position: relative;
  padding-top: calc(1 * var(--spacing-mobile));
  margin-top: calc(1 * var(--spacing-mobile));
}
* + .button-wrap--has-dividing-line:after {
  position: absolute;
  content: "";
  background: var(--colour-border);
  height: 1px;
  left: 10px;
  right: 10px;
  top: 0;
}
@media (min-width: 768px) {
  * + .button-wrap--has-dividing-line {
    padding-top: calc(1 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  * + .button-wrap--has-dividing-line {
    padding-top: calc(1 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  * + .button-wrap--has-dividing-line {
    padding-top: calc(1 * var(--spacing-large));
  }
}
@media (min-width: 768px) {
  * + .button-wrap--has-dividing-line {
    margin-top: calc(1 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  * + .button-wrap--has-dividing-line {
    margin-top: calc(1 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  * + .button-wrap--has-dividing-line {
    margin-top: calc(1 * var(--spacing-large));
  }
}
@media (min-width: 768px) {
  .button-wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .button-wrap--overflow {
    position: relative;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow: auto;
    padding-left: 15px;
    padding-right: 30px;
    margin-left: -15px;
    margin-right: -15px;
  }
}
@media (min-width: 768px) and (min-width: 576px) {
  .button-wrap--overflow {
    padding-left: calc((((100vw - 540px)/2) + 15px) * 1);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .button-wrap--overflow {
    padding-left: calc((((100vw - 720px)/2) + 15px) * 1);
  }
}
@media (min-width: 768px) and (min-width: 992px) {
  .button-wrap--overflow {
    padding-left: calc((((100vw - 960px)/2) + 15px) * 1);
  }
}
@media (min-width: 768px) and (min-width: 1200px) {
  .button-wrap--overflow {
    padding-left: calc((((100vw - 1140px)/2) + 15px) * 1);
  }
}
@media (min-width: 768px) and (min-width: 1500px) {
  .button-wrap--overflow {
    padding-left: calc((((100vw - 1500px)/2) + 15px) * 1);
  }
}
@media (min-width: 768px) and (min-width: 576px) {
  .button-wrap--overflow {
    padding-right: calc((((100vw - 540px)/2) + 15px) * 2);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .button-wrap--overflow {
    padding-right: calc((((100vw - 720px)/2) + 15px) * 2);
  }
}
@media (min-width: 768px) and (min-width: 992px) {
  .button-wrap--overflow {
    padding-right: calc((((100vw - 960px)/2) + 15px) * 2);
  }
}
@media (min-width: 768px) and (min-width: 1200px) {
  .button-wrap--overflow {
    padding-right: calc((((100vw - 1140px)/2) + 15px) * 2);
  }
}
@media (min-width: 768px) and (min-width: 1500px) {
  .button-wrap--overflow {
    padding-right: calc((((100vw - 1500px)/2) + 15px) * 2);
  }
}
@media (min-width: 768px) and (min-width: 576px) {
  .button-wrap--overflow {
    margin-left: calc((((100vw - 540px)/2) + 15px) * -1);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .button-wrap--overflow {
    margin-left: calc((((100vw - 720px)/2) + 15px) * -1);
  }
}
@media (min-width: 768px) and (min-width: 992px) {
  .button-wrap--overflow {
    margin-left: calc((((100vw - 960px)/2) + 15px) * -1);
  }
}
@media (min-width: 768px) and (min-width: 1200px) {
  .button-wrap--overflow {
    margin-left: calc((((100vw - 1140px)/2) + 15px) * -1);
  }
}
@media (min-width: 768px) and (min-width: 1500px) {
  .button-wrap--overflow {
    margin-left: calc((((100vw - 1440px)/2) + 15px) * -1);
  }
}
@media (min-width: 768px) and (min-width: 576px) {
  .button-wrap--overflow {
    margin-right: calc((((100vw - 540px)/2) + 15px) * -1);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .button-wrap--overflow {
    margin-right: calc((((100vw - 720px)/2) + 15px) * -1);
  }
}
@media (min-width: 768px) and (min-width: 992px) {
  .button-wrap--overflow {
    margin-right: calc((((100vw - 960px)/2) + 15px) * -1);
  }
}
@media (min-width: 768px) and (min-width: 1200px) {
  .button-wrap--overflow {
    margin-right: calc((((100vw - 1140px)/2) + 15px) * -1);
  }
}
@media (min-width: 768px) and (min-width: 1500px) {
  .button-wrap--overflow {
    margin-right: calc((((100vw - 1440px)/2) + 15px) * -1);
  }
}
@media (min-width: 768px) {
  .button-wrap--overflow .button:first-child {
    margin-left: 0;
  }
  .button-wrap--overflow .button:nth-last-child {
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .button-wrap--overflow__overflow {
    padding-left: 15px;
    opacity: 0;
    margin-left: 0;
    margin-right: 0;
  }
}
@media (min-width: 768px) and (min-width: 576px) {
  .button-wrap--overflow__overflow {
    padding-left: calc((((100vw - 540px)/2) + 15px) * 1);
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  .button-wrap--overflow__overflow {
    padding-left: calc((((100vw - 720px)/2) + 15px) * 1);
  }
}
@media (min-width: 768px) and (min-width: 992px) {
  .button-wrap--overflow__overflow {
    padding-left: calc((((100vw - 960px)/2) + 15px) * 1);
  }
}
@media (min-width: 768px) and (min-width: 1200px) {
  .button-wrap--overflow__overflow {
    padding-left: calc((((100vw - 1140px)/2) + 15px) * 1);
  }
}
@media (min-width: 768px) and (min-width: 1500px) {
  .button-wrap--overflow__overflow {
    padding-left: calc((((100vw - 1500px)/2) + 15px) * 1);
  }
}
@media (max-width: 767px) {
  .button-wrap {
    margin-left: -5px;
    margin-right: -5px;
  }
  .button-wrap > * {
    margin-left: 5px;
    margin-right: 5px;
  }
  .button-wrap--mob-wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: calc(var(--spacing-mobile) * -1);
  }
  .button-wrap--mob-wrap > * {
    margin-bottom: var(--spacing-mobile);
  }
  * + .button-wrap--has-dividing-line:after {
    left: 5px;
    right: 5px;
  }
  .button-wrap--overflow {
    margin-left: 0;
    margin-right: 0;
  }
  .button-wrap--overflow .button + .button {
    margin-left: calc(var(--spacing-mobile)*2);
  }
}