.btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 6px;
  border: 1px solid transparent;

  svg {
    flex-shrink: 0;
  }
}

.btn--big {
  min-width: 48px;
  min-height: 48px;
  padding: 5px 19px;
  font-weight: 400;
  font-size: var(--Paragraph-1);
  letter-spacing: -0.32px;
  border-radius: 6px;
}

.btn--small {
  min-width: 32px;
  min-height: 32px;
  padding: 5px 11px;
  font-weight: 500;
  font-size: var(--Caption);
  letter-spacing: 0;
  border-radius: 4px;
}

.btn--main {
  color: var(--main-button-text);
  background-color: var(--btn);
  border-color: var(--btn);

  svg {
    path[stroke] {
      stroke: var(--main-button-text);
    }

    path[fill] {
      fill: var(--main-button-text);
    }
  }
}

.btn--secondary {
  color: var(--paragraph);
  background-color: var(--base-secondary);
  border-color: var(--base-secondary);

  svg {
    path[stroke] {
      stroke: var(--paragraph);
    }

    path[fill] {
      fill: var(--paragraph);
    }
  }
}

.btn--secondary-outlined {
  color: var(--paragraph);
  background-color: var(--base-secondary);
  border-color: var(--border);

  svg {
    path[stroke] {
      stroke: var(--paragraph);
    }

    path[fill] {
      fill: var(--paragraph);
    }
  }
}

.btn--outlined {
  color: var(--paragraph);
  background-color: transparent;
  border-color: var(--border);

  svg {
    path[stroke] {
      stroke: var(--paragraph);
    }

    path[fill] {
      fill: var(--paragraph);
    }
  }
}

.btn--transparent {
  color: var(--paragraph);
  background-color: transparent;
  border-color: transparent;

  svg {
    path[stroke] {
      stroke: var(--paragraph);
    }

    path[fill] {
      fill: var(--paragraph);
    }
  }
}

.btn--transparent-link {
  padding-left: 0;
  padding-right: 0;
  color: var(--paragraph);
  background-color: transparent;
  border: none;

  svg {
    path[stroke] {
      stroke: var(--paragraph);
    }

    path[fill] {
      fill: var(--paragraph);
    }
  }
}

.btn--danger {
  color: var(--failure);
  background-color: transparent;
  border-color: var(--failure);

  svg {
    path[stroke] {
      stroke: var(--failure);
    }

    path[fill] {
      fill: var(--failure);
    }
  }
}

.btn--disabled {
  color: var(--disabled);
  background-color: transparent;
  border-color: transparent;
  pointer-events: none;

  svg {
    path[stroke] {
      stroke: var(--disabled);
    }

    path[fill] {
      fill: var(--disabled);
    }
  }
}

.btn--icon-only {
  padding: 0;
}

.btn--round {
  background-color: var(--base-quaternary);
  border: none;
  border-radius: 50%;

  svg {
    path[stroke] {
      stroke: var(--paragraph);
    }

    path[fill] {
      fill: var(--paragraph);
    }
  }
}

.btn--space-between {
  justify-content: space-between;
}

/* Added to ensure url_button and text buttons always have borders */
.btn--outline {
  color: var(--paragraph);
  background-color: transparent;
  border: 1px solid var(--border);

  svg {
    path[stroke] {
      stroke: var(--paragraph);
    }

    path[fill] {
      fill: var(--paragraph);
    }
  }
}

.btn:hover {
  color: var(--hover-text);

  svg {
    path[stroke] {
      stroke: var(--hover-text);
    }

    path[fill] {
      fill: var(--hover-text);
    }
  }

  .hover-corner {
    display: block;
  }
}

.btn:not(.btn--transparent-link):hover {
  background-color: var(--hover-noise);
  background-image: url("../../assets/images/noise-effect-hover.webp");
  background-size: 100px 100px;
  border-color: var(--border);
  box-shadow: 0 4px 24px 0 var(--dropdown-shadow);
}

.btn:active {
  color: var(--pressed);

  svg {
    path[stroke] {
      stroke: var(--pressed);
    }

    path[fill] {
      fill: var(--pressed);
    }
  }
}

.btn:not(.btn--transparent-link):active {
  background-color: var(--expanded);
  background-image: none;
}

.link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 5px 0;
  color: var(--gray-3);
}

.link:hover {
  color: var(--hover-text);
  text-decoration: underline;
}