button {
  cursor: pointer !important;
  border-radius: var(--radius-radius-2-px, 0.125rem);
  transition: 0.2s ease-out;
  transition-property: background-color;
}

*:is(button, .btn, .btn:not(.btn-secondary, .btn-primary)):hover {
  background: rgba(0, 0, 0, 0.03);
}

:is(.btn-secondary, .btn-primary):hover {
  background: initial;
}

.btn {
  padding: 0.7em 3em;
  border-radius: 4px;
  outline: 2px solid transparent;
  outline-offset: 2px;

  &.btn-underline {
    outline: none;
    border: none;
    font-size: 1em;
    background: white;

    --color: var(--color-text);

    &:not(:has(.p-cross)) {
        text-decoration: underline;
    }
  }
}

.btn-outline {
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  color: inherit !important;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  border: 1px solid var(--neutrals-grey-200, #d5d5d5) !important;
  cursor: pointer;
}

.feint {
  color: var(--typo-sub-text, #808080);
  font-family: Roboto;
  font-size: 14px;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 150%;
}

.table__header-left .btn {
  padding: 0.375rem 0.75rem;
}

.table__header-right .btn {
  padding: 0.5em 1em;
}

:is(button, a).btn-primary {
  --AccentColorText: #fff !important;
  background: var(--color-brand-accent-dark, #49976e) !important;
  color: var(--color-white, #fff) !important;
  padding: var(--_padding, 8px) !important;
}

.btn-primary:hover {
  background-color: var(--color-brand-accent-dark, #49976e) !important;
  opacity: 0.97;
}
.btn-warning {
  background: var(--color-warning, #ffc107);
  color: var(--color-warning-text, #212529);
}

.icon-button {
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  padding: 6px !important;
  gap: 2px;
  font-weight: 500;
  text-transform: capitalize;
  margin: 0 !important;

  color: var(--_color);
}

.icon-button .icon {
  font-size: 1.3em;
}

.icon-button--active {
  --_color: var(--active-field-color);
}

.icon-button:is(::before, ::after) {
  --_size: 22px;
  font-size: var(--_size);
}

.outline-button {
  --_color: var(--color-brand-accent-dark, #49976e);
  display: flex;
  padding: 6px;

  display: flex;
  padding: 8px;
  align-items: center;
  gap: 0.5rem;
  background: none;
  outline: none;
  color: var(--_color) !important;

  border-radius: var(--radius-radius-2-px, 2px);
  border: 1px solid var(--_color);
}

.outline-button .icon {
  --_size: 16px;
  font-size: var(--_size);
}

.property-bulk-actions{
  display: flex;
}

.btn-underline {
  color: var(--color, var(--badge-delivered-delivered, #49976e)) !important;
  font-family: Roboto;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;
  text-decoration-line: underline !important;
  padding: 4px;
  display: inline-flex;

}

:is(.btn, .icon-button, input):disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

:is(.btn, .icon-button)[data-loading='true'] {
  cursor: wait;
  opacity: 0.5;
}

.btn-filled {
  background-color: var(--button-bg-hover) !important;
}

:is(.btn-filled, .btn-outline, .btn-primary, .icon-button, td):focus {
  --outline-offset: 2px;

  outline: 2px solid var(--outline-color, var(--color-green));
  outline-offset: var(--outline-offset);
  border-radius: 2px; 

  &.row-action {
    outline-offset: 0px;
  }
}

td:focus {
  --outline-offset: 0px !important;

  outline: none !important;
  border: 1px solid var(--outline-color, var(--color-green)) !important;
  filter: brightness(.96);
}

.search-wrapper:focus-within {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

label:has(> input[type="checkbox"]) {
  border-radius: 2px;
  &:focus-within {
    outline: 2px solid var(--color-green);
    outline-offset: 2px;
  }

  input[type="checkbox"] {
    outline: none;
  }

}

#frmQuoteBreakdown .detail-group {
  .field .value {
    overflow: visible !important;
  }
}

.btn-white {
  background-color: var(--color-white, #fff) !important;
}

.btn-duotone {
  --_color: var(--color-brand-accent-dark);
  border: 1px solid var(--_color) !important;
  color: var(--_color) !important; 
  background-color: var(--button-bg-hover) !important;
}

.icon-button span {
  text-transform: none;
  white-space: nowrap;
  padding-right: 6px;
}
.slide-switch {
  display: flex;
  align-items: center;
  background-color: var(--color-white, #fff);
  padding: 2px;
  gap: 4px;
  border-radius: 5px;
}
.slide-switch label {
  display: flex;
  padding: 4px 8px;
  align-items: center;
  cursor: pointer;
  margin: 0;
  gap: 8px;
  border-radius: 4px;

  color: var(--typo-text-color, #2C2C2C);
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%;

  user-select: none;
}

.slide-switch label:has(:checked) {
  background: var(--prompt-colors-accent-light, #E5EFFD);
  color: var(--prompt-colors-accent-dark, #1F5199);
}

/* MOVE TO INPUTS.CSS */
input[type="number"].no-step::-webkit-outer-spin-button,
input[type="number"].no-step::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"].no-step {
    -moz-appearance: textfield;
    appearance: textfield;
}

:is(.btn-light-green, .btn-light-red) {
  --outline-offset: 2px;
  padding: 4px;
  gap: 4px;

  display: flex;
  align-items: center;

  background-color: var(--background-color) !important;
  color: var(--color) !important;
  --outline-color: var(--color);

  &:disabled {
    filter: grayscale(1);
  }
}

.btn-light-green {
  --background-color: #EDFFF7;
  --color: #277D63;  
}

.btn-light-red {
  --background-color: #FFE3E3;
  --color: #FF6A6A;
}

.switch-group {
    display: flex;
    align-items: flex-end;
    padding-bottom: .5em;
}

.btn {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
}