@import url("@brave/leo/tokens/css/variables.css");
@import url("./variables.css");

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

html {
  box-sizing: border-box;
  font-family: var(--font-poppins), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: var(--leo-typography-default-regular-font-size);

  -webkit-font-smoothing: antialiased;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  font: var(--leo-font-default-regular);
  color: var(--leo-color-text-primary);
  background: var(--leo-color-container-background);
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;

  -webkit-font-smoothing: antialiased;
}

ol, ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

h1 {
  font: var(--leo-font-primary-heading-h1);
}

h2 {
  font: var(--leo-font-primary-heading-h2);
}

h3 {
  font: var(--leo-font-primary-heading-h3);
}

h4 {
  font: var(--leo-font-primary-heading-h4);
}

hr {
  @apply my-2;

  margin-top: var(--leo-spacing-xl);
  margin-bottom: var(--leo-spacing-xl);

  opacity: 0.4;
  border: 0;
  border-top: 1px solid var(--leo-color-text-primary);
}

.headings-display-2 {
  font: var(--leo-font-heading-display2);
}

.small-regular {
  font: var(--leo-font-small-regular);
}

.default-regular {
  font: var(--leo-font-default-regular);
}

.large-regular {
  font: var(--leo-font-large-regular);
}

.small-semibold {
  font: var(--leo-font-small-semibold);
}

.color-tertiary {
  color: var(--leo-color-text-tertiary);
}

.color-interactive {
  color: var(--leo-color-icon-interactive);
}

.color-secondary {
  color: var(--leo-color-text-secondary);
}

.color-subtle {
  color: var(--leo-color-divider-subtle);
}


.label-component {
  font-size: var(--leo-typography-components-label-font-size);
  font-weight: var(--leo-typography-components-label-font-weight);
  line-height: var(--leo-typography-components-label-line-height);
  color: var(--leo-color-text-secondary);
  letter-spacing: var(--leo-typography-components-label-letter-spacing);
}

.info-text {
  padding: var(--leo-spacing-xl);
  color: var(--leo-color-systemfeedback-info-text);
  background-color: var(--leo-color-systemfeedback-info-background);
  border-radius: var(--leo-radius-m);
}

.error-pill {
  padding: var(--leo-spacing-s);

  font-size: var(--leo-typography-components-label-font-size);
  font-weight: var(--leo-typography-components-label-font-weight);
  line-height: var(--leo-typography-components-label-line-height);
  color: var(--leo-color-white);
  letter-spacing: var(--leo-typography-components-label-letter-spacing);

  background-color: var(--leo-color-red-40);
  border-radius: var(--leo-radius-s);
}

.error-text {
  padding: var(--leo-spacing-2xl);
  color: var(--leo-color-systemfeedback-error-icon);
  background-color: var(--leo-color-systemfeedback-error-background);
  border-radius: var(--leo-radius-m);
}

[slot='errors'] {
  display: flex;
  flex-direction: row;
  gap: var(--leo-spacing-m);
  align-items: center;

  margin-top: var(--leo-spacing-s);

  color: var(--leo-color-systemfeedback-error-icon);
}

.main {
  display: flex;
  justify-content: center;

  width: 100%;
  height: 100%;
  min-height: calc(100vh - 80px);
}

.content-background {
  width: 100%;
  padding: var(--leo-spacing-4xl);
  background: var(--leo-color-page-background);
  border-radius: var(--leo-radius-xl) var(--leo-radius-m) var(--leo-radius-m) var(--leo-radius-xl);
}

@media (width <= 768px) {
  .content-background, .main {
    padding: 5px;
    background: var(--leo-color-container-background);
  }
}

@media (width <= 468px) {
  .content-background, .main {
    margin:0;
    padding: 10px;
    background: var(--leo-color-container-background);
  }
}

.content-width {
  width: 800px;
}

.content-width-sm {
  width: 650px;
}

.animate-dash {
  animation: dash 1.5s ease-in-out infinite;
}

.shadow {
  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%), 0 1px 0 0 rgb(0 0 0 / 5%);
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}
