.cbp-modal {
  background-color: var(--cbp-color-white);
  border-radius: var(--cbp-border-radius-softer);
  border-width: 0;
  box-shadow: var(--cbp-shadow-level-1-down);
  width: 22rem;
  padding: 0;

  & > hr {
    border-color: var(--cbp-color-base-neutral-light);
    border-style: solid;
    border-width: var(--cbp-border-size-sm);
  }

  &::backdrop {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

.cbp-modal__heading {
  color: var(--cbp-color-text-darker);
  font-size: var(--cbp-font-size-heading-lg);
  font-weight: var(--cbp-font-weight-medium);
  line-height: var(--cbp-line-height-md);

  & i {
    font-size: var(--cbp-font-size-heading-md);
    margin-right: var(--cbp-space-4x);
  }
}

.cbp-modal__heading--danger {
  color: var(--cbp-color-danger-base);
}

.cbp-modal__content {
  padding: var(--cbp-space-5x) var(--cbp-space-4x);

  & hr {
    margin: var(--cbp-space-4x) 0;
  }
}

.cbp-modal__description {
  color: var(--cbp-color-text-darker);
  font-size: var(--cbp-font-size-heading-xs);
  font-weight: var(--cbp-font-weight-bold);
  line-height: var(--cbp-line-height-xs);
}

.cbp-modal__controls {
  display: flex;

  & button {
    border-radius: 0;
    flex-grow: 1;
    height: var(--cbp-space-11x);
    
    &:first-child {
      border-bottom-left-radius: var(--cbp-border-radius-softer);
    }

    &:last-child {
      border-bottom-right-radius: var(--cbp-border-radius-softer);
    }
  }
}