/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  --divider-border-color: var(--joy-color-neutral-30);
  --divider-title-color: var(--joy-color-neutral-60);
  --divider-icon-background-color: var(--joy-color-secondary-10);
  --divider-icon-color: var(--joy-color-secondary-30);
  display: block;
  width: 100%;
}

.joy-divider-cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: var(--joy-core-spacing-4) 0;
  border-radius: var(--joy-core-radius-3);
  min-height: 72px;
  padding: var(--joy-core-spacing-4);
  border: 2px dashed var(--divider-border-color);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: all var(--joy-transition-duration-short) var(--joy-transition-timing-function);
  background: none;
  outline: none;
}
.joy-divider-cta__disabled {
  --divider-border-color: var(--joy-color-neutral-30);
  --divider-title-color: var(--joy-color-neutral-40);
  --divider-icon-background-color: var(--joy-color-neutral-30);
  --divider-icon-color: var(--joy-color-neutral-40);
  cursor: not-allowed;
  user-select: none;
}
.joy-divider-cta--icon {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: var(--joy-core-spacing-4);
  width: 40px;
  height: 40px;
  background-color: var(--divider-icon-background-color);
  border-radius: var(--joy-core-radius-2);
}
.joy-divider-cta--icon joy-icon {
  color: var(--divider-icon-color);
}
.joy-divider-cta--content {
  text-align: left;
  color: var(--joy-color-neutral-40);
  font-weight: var(--joy-font-weight-normal);
  font-size: var(--joy-font-size-primary-300);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
}
.joy-divider-cta--content---title {
  color: var(--divider-title-color);
  margin: 0;
  padding: 0;
  font-size: var(--joy-font-size-primary-400);
  font-weight: var(--joy-font-weight-bold);
}
.joy-divider-cta:not(.joy-divider-cta__disabled):hover {
  --divider-border-color: var(--joy-color-secondary-30);
}
.joy-divider-cta:not(.joy-divider-cta__disabled):focus-visible {
  --divider-title-color: var(--joy-color-secondary-50);
  --divider-border-color: var(--joy-color-secondary-50);
}