@import "./styles/utils.css";
@import "./styles/buttons.css";
@import "./styles/legacy-buttons.css";
@import "./styles/dropdowns.css";
@import "./styles/forms.css";
@import "./styles/layout.css";
@import "./styles/shadows.css";
@import "./styles/text.css";

@layer components {
  /* Basis for icon component */
  .ui-icon-cool-black {
    stroke: var(--color-cool-black);
  }

  .ui-icon-white {
    stroke: var(--color-white);
  }

  .ui-icon-dark-grey {
    stroke: var(--color-dark-grey);
  }

  .ui-version-tag {
    @apply inline-block absolute align-top uppercase font-bold whitespace-nowrap;

    position: relative;
    vertical-align: super;
    margin-left: 3px;
    font-size: 8px;
  }

  .ui-section-spacing {
    @apply my-20 sm:my-24 md:my-32;
  }

  /* The *-collapse classes remove the spacing between adjacent .ui-section-spacing classes,
     in a way that handles margin collapsing as well (hence not an exact opposite) */
  .ui-section-spacing-collapse,
  .ui-section-spacing-collapse-full {
    @apply -my-4 sm:-my-8 md:-my-16 first:-mb-8 sm:first:-mb-16 md:first:-mb-32 last:-mt-8 sm:last:-mt-16 md:last:-mt-32;
  }

  .ui-section-spacing-collapse-half {
    @apply -my-2 sm:-my-4 md:-my-8 first:-mb-4 sm:first:-mb-8 md:first:-mb-16 last:-mt-4 sm:last:-mt-8 md:last:-mt-16;
  }

  .ui-section-spacing-collapse-quarter {
    @apply -my-1 sm:-my-2 md:-my-4 first:-mb-2 sm:first:-mb-4 md:first:-mb-8 last:-mt-2 sm:last:-mt-4 md:last:-mt-8;
  }

  .ui-section-spacing-collapse-eighth {
    @apply -my-0.5 sm:-my-1 md:-my-2 first:-mb-1 sm:first:-mb-2 md:first:-mb-4 last:-mt-1 sm:last:-mt-2 md:last:-mt-4;
  }

  .ui-content-spacing {
    @apply my-10 sm:my-12 md:my-16;
  }

  .ui-divider-spacing {
    @apply my-5 sm:my-6 md:my-8;
  }

  .ui-container-padding {
    @apply px-6 py-10 sm:px-10 sm:py-12 md:p-16;
  }
}