@use '_variables' as *;
@use '_mixins' as *;
@use '_button-mixins' as *;

.peertube-button {
  @include peertube-button;
}

.peertube-button-big {
  @include peertube-button-big;
}

.peertube-button-small {
  @include peertube-button-small;
}

.peertube-button-link {
  @include peertube-button-link;
}

.peertube-button-big-link {
  @include peertube-button-big-link;
}

.primary-button {
  @include primary-button;
}

.rounded-icon-button {
  @include rounded-icon-button;
}

.secondary-button {
  @include secondary-button;
}

.tertiary-button {
  @include tertiary-button;
}

.button-as-link {
  @include button-as-link;
}

.danger-button {
  @include danger-button;
}

.peertube-button-icon {
  @include button-with-icon(24px, 8px, 0);
}

.peertube-create-button {
  @include peertube-button-link;
  @include primary-button;
  @include button-with-icon(24px, 8px, 0);
}

.button-unstyle {
  padding: 0;
  border: 0;
}

.peertube-button-like-link {
  padding: 0;
  border: 0 !important;
  text-decoration: underline;
  color: pvar(--fg-400);

  &:hover {
    color: pvar(--fg-100);
  }
}

.button-file {
  @include peertube-file;
  @include peertube-button;
}

.reset-button {
  height: auto;

  @include peertube-button;
  @include tertiary-button;

  &.reset-button-small {
    font-size: 80%;
    padding: 2px 5px;
    margin: 0 0.25rem;
    height: fit-content;
    line-height: initial;
  }
}

.support-button {
  color: pvar(--support-btn-fg);
  background-color: pvar(--support-btn-bg);

  @include button-with-icon(21px, 0, -1px);

  my-global-icon {
    @include apply-svg-color(pvar(--support-btn-fg));

    path:first-child {
      fill: pvar(--support-btn-heart-bg) !important;
    }
  }
}
