@tailwind base;
@tailwind components;
@tailwind utilities;

[contenteditable="true"]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #707070;
  font-size: 0.8rem;
}

.gradient-border::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 45deg,
    rgba(244, 114, 182, 0.4) 85deg,
    rgba(192, 132, 252, 0.4) 95deg,
    transparent 110deg,
    transparent 360deg
  );
  content: "";
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
}

@layer utilities {
  @supports not (overflow-wrap: anywhere) {
    .break-anywhere {
      word-break: break-word;
    }
  }

  @supports (overflow-wrap: anywhere) {
    .break-anywhere {
      overflow-wrap: anywhere;
    }
  }
}