/* ========================================================================== */
/* Homepage buttons */
/* ========================================================================== */

.tl-btn {
  padding: var(--tblr-btn-padding-x) calc(var(--tblr-btn-padding-y) * 2);
  border-width: 2px;

  font-family: "Boogaloo";
  text-transform: uppercase;
  font-size: var(--sl-font-size-x-large);

  &.big {
    font-size: var(--sl-font-size-2x-large);
  }

  &:hover {
    color: currentColor;
    border-color: var(--tblr-emphasis-color);
    background: transparent;
  }
}

.tl-btn-2 {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: #fff;
  margin-top: 1.5rem;
  white-space: nowrap;

  &:hover,
  &:focus-visible {
    background: var(--tblr-primary);
    border-color: var(--tblr-primary);
    color: #fff;
  }
}

.tl-btn-3 {
  background: #fff;
  border-color: #fff;
  color: #171717;

  &:hover,
  &:focus-visible {
    background: #ededed;
    border-color: #ededed;
    color: #000;
  }
}