@import './font-families.css';

@import './props.color.css';
@import './props.borders.css';
@import './props.shadows.css';
@import './props.layout.css';
@import './props.text.css';
@import './props.media.css';
@import './props.animations.css';

/* --------------------------------- LAYERS --------------------------------- */
@layer reset;
@layer element;
@layer third-party;
@layer component;
@layer utility;
@layer override;
@layer app;

/* ------------------------------ End of layers ----------------------------- */

@layer reset {
  * {
    box-sizing: border-box;
  }
  button {
    -webkit-appearance: none;
    border-radius: 0;
    text-align: inherit;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    border: none;
    color: inherit;
    font: inherit;
    display: flex;
    align-items: center;
    &:disabled {
      cursor: not-allowed;
    }
  }

  :focus-visible {
    outline: 0;
  }
  
  :disabled {
    cursor: not-allowed;
  }
  .disabled {
    cursor: not-allowed;
  }
  
  ::placeholder {
    color: var(--form-placeholder-fg-color);
    font-weight: var(--font-weight-light);
  }
  .placeholder {
    color: var(--form-placeholder-fg-color);
    font-weight: var(--font-weight-light);
  } 
}

@layer element {
  * {
    font-family: var(--font-family-text);
  }

  body {
    background-color: var(--surface-bg-color);
    color: var(--surface-fg-color);
    text-size-adjust: 100%;
  }

  input,
  select,
  button {
    font-size: var(--text-size-md);
    line-height: 1;
  }

  i,
  em {
    font-family: var(--font-family-text-italic);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-family-display);
  }
  h1 i,
  h1 em,
  h2 i,
  h2 em,
  h3 i,
  h3 em,
  h4 i,
  h4 em,
  h5 i,
  h5 em,
  h6 i,
  h6 em {
    font-family: var(--font-family-display-italic);
  }

  p {
    margin: 0 0 1rem 0;
  }
  p:last-of-type {
    margin: 0;
  }

  dialog {
    overflow: visible;
    transition: opacity 0.5s var(--ease-3);
  }
  dialog::backdrop {
    background-color: hsla(0, 0%, 0%, 0.7);
  }

  code {
    font-family: var(--font-family-monospace);
    font-size: var(--text-size-1);
  } 
}

[hidden],
.visually-hidden {
  height: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  width: 0;
  border: 0;
}