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-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: 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(--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;
}

: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(--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(--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);
}