:root {
  --rx-rounded-sm: var(--bs-border-radius);
  --rx-rounded-md: var(--bs-border-radius);
  --rx-rounded-lg: var(--bs-border-radius);
  --rx-rounded-xl: var(--bs-border-radius);
  --rx-toolbar-icon-size: 18px;
  --rx-toolbar-button-width: 34px;
  --rx-toolbar-button-height: 24px;
  --rx-toolbar-padding: 8px;
  --rx-shadow-modal: var(--bs-box-shadow);
  --rx-shadow-dropdown: var(--bs-box-shadow);
  --bs-input-btn-focus-width: .25rem;
  --bs-input-focus-width: var(--bs-input-btn-focus-width);
  --bs-input-focus-color: var(--bs-body-color);
}

.rx-container {
  overflow: hidden;
  padding: 0 !important;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);

  &.rx-in-focus {
    color: var(--bs-input-focus-color);
    background-color: var(--bs-body-bg);
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    outline: 0;
    box-shadow: 0 0 0 var(--bs-input-btn-focus-width) rgba(var(--bs-primary-rgb), 0.25);

    &.is-valid {
      border-color: var(--bs-success);
      box-shadow: 0 0 0 var(--bs-input-focus-width) rgba(var(--bs-success-rgb), 0.25);
    }

    &.is-invalid {
      border-color: var(--bs-danger);
      box-shadow: 0 0 0 var(--bs-input-focus-width) rgba(var(--bs-danger-rgb), 0.25);
    }
  }

  background-position: bottom 0.225rem right 0.225rem;
}

.rx-content {
  padding: 0.375rem 0.75rem !important;
  position: relative;

  p, ul li, ol li, td {
    font-size: var(--bs-body-font-size);
    line-height: 1.5;
    color: var(--bs-body-color);
  }

  p + * {
    margin-top: 0.725rem;
  }
}

.rx-placeholder {
  &:before {
    font-size: var(--bs-body-font-size);
    color: var(--bs-secondary-color);
    opacity: 1;
  }
}

.rx-control {
  margin-left: -0.75rem;
}

.rx-toolbar-container {
  border-bottom: var(--bs-border-width) solid var(--bs-border-color-translucent);
}

.rx-toolbar {
  .rx-button-icon {
    span {
      color: var(--bs-secondary-color);
    }

    &:hover span {
      color: var(--bs-body-color);
    }
  }
}

.rx-popup {
  z-index: 2000;
}
.rx-dropdown {
  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
}

.rx-modal {
  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
}

.rx-modal-header {
  display: none;
}

.rx-form-input, .rx-form-textarea {
  border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);

  &:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    outline: 0;
    box-shadow: 0 0 0 var(--bs-input-btn-focus-width) rgba(var(--bs-primary-rgb), 0.25);
  }
}

.rx-form-button {
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  border-radius: var(--bs-border-radius);
}

.rx-form-button-primary {
  --bs-btn-bg: #0d6efd;
  --bs-btn-hover-bg: #0b5ed7;

  background-color: var(--bs-btn-bg);
  &:hover {
    background-color: var(--bs-btn-hover-bg);
  }
}

/* Button links */
.rx-content a.button {
  display: inline-block;
  padding: 0.25em 0.5em;
  margin: 0.25em 0;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.rx-content a.button-primary {
  color: var(--bs-white);
  background: var(--bs-primary);
  border: 1px solid var(--bs-primary);
}

.rx-content a.button-secondary {
  color: var(--bs-primary);
  background: var(--bs-white);
  border: 1px solid var(--bs-primary);
}