.btn {
  background-color: transparent;
  border-color: var(--colour-foreground);
  border-radius: 0.25vw;
  border-style: solid;
  border-width: 1px;
  color: var(--colour-foreground);
  cursor: pointer;
  display: inline-block;
  font-size: 1.2vw;
  font-weight: 500;
  line-height: 150%;
  padding: 1.3vw 3vw;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.btn-sm {
  padding: 0.65vw 1.5vw;
  font-size: 85%;
}

.btn [class^=icon] {
  margin-left: 0.7vw;
}

@media screen and (max-width: 1023px) {
  .btn {
    border-radius: 2.5px;
    font-size: 14px;
    padding: 12px 24px;
  }
  .btn-sm {
    padding: 6.5px 15px;
  }
  .btn [class^=icon] {
    margin-left: 7px;
  }
}
.btn:hover {
  background-color: var(--colour-background-hover);
  border-color: var(--colour-foreground);
}

.btn:focus {
  box-shadow: 0 0 4px 3px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

.btn:active {
  background-color: var(--colour-background-active);
  border-color: var(--colour-foreground);
}

.invert .btn:focus {
  box-shadow: 0 0 4px 3px rgba(255, 255, 255, 0.25);
}

.invert .btn:not([class*=btn-]) {
  border-color: var(--colour-background);
  color: var(--colour-background);
}
.invert .btn:not([class*=btn-]):hover {
  background-color: var(--colour-background);
  color: var(--colour-foreground);
}
.invert .btn:not([class*=btn-]):active {
  background-color: transparent;
  color: var(--colour-background);
}

.btn-link {
  border-width: 0;
}

.btn-blue {
  background-color: #009DE0;
  border-color: transparent;
  color: #171717;
}
.btn-blue:hover {
  color: var(--colour-foreground);
}
.btn-blue:focus {
  border-color: var(--colour-foreground);
}
.btn-blue:focus:active {
  background-color: var(--colour-background-active);
  color: var(--colour-foreground);
}

.btn-gold {
  border-color: transparent;
  color: #171717;
}
.btn-gold:hover {
  color: var(--colour-foreground);
}
.btn-gold:focus {
  border-color: var(--colour-foreground);
}
.btn-gold:focus:active {
  background-color: var(--colour-background-active);
  color: var(--colour-foreground);
}

.btn-green {
  background-color: #1D6F42;
  border-color: transparent;
  color: #ffffff;
}
.btn-green:hover {
  color: var(--colour-foreground);
}
.btn-green:focus {
  border-color: var(--colour-foreground);
}
.btn-green:focus:active {
  background-color: var(--colour-background-active);
  color: var(--colour-foreground);
}

.btn-primary {
  background-color: #CBF400;
  border-color: transparent;
  color: #171717;
}
.btn-primary:hover {
  color: var(--colour-foreground);
}
.btn-primary:focus {
  border-color: var(--colour-foreground);
}
.btn-primary:focus:active {
  background-color: var(--colour-background-active);
  color: var(--colour-foreground);
}

.btn-group {
  display: flex;
  gap: 0.5vw;
  flex-wrap: wrap;
}

@media screen and (max-width: 1023px) {
  .btn-group {
    gap: 5px;
  }
}

/*# sourceMappingURL=buttons.css.map */