@use "/styles/all" as *;

.btn {
  cursor: pointer;

  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;

  width: fit-content;

  border-radius: 8px;
}

// Button variants
.primary {
  background-color: $primary;
  p {
    color: $light !important;
  }
}
.transparet {
  padding: unset !important;
  background-color: transparent;
  p {
    cursor: pointer;
    font-size: 11px !important;
  }
}

.dark {
  background-color: $grey900;
  p {
    color: $light !important;
  }
}

.transparent-grey {
  background-color: $light;
  border: 1px solid $grey200;
  p {
    color: $grey900 !important;
  }
}

.transparent-error {
  background-color: $light;
  p {
    color: $ErrorRed400 !important;
  }
}

.warning {
  background-color: $WarningYellow600 !important;
  p {
    color: $light !important;
  }
}

.isFullWidth {
  width: 100%;
}

// Padding utilities
.padding-block-4 {
  padding-block: 4px;
}

.padding-block-8 {
  padding-block: 8px;
}

.padding-block-10 {
  padding-block: 10px;
}

.padding-inline-8 {
  padding-inline: 8px;
}

.padding-inline-14 {
  padding-inline: 14px;
}

.padding-inline-16 {
  padding-inline: 16px;
}

.disabled {
  opacity: 0.5;
}