@import './variables';

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter.var.woff2') format('woff2');
  font-named-instance: 'Regular';
}

@font-face {
  font-family: 'Inter var';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter-italic.var.woff2') format('woff2');
  font-named-instance: 'Italic';
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('/fonts/Inter-Regular.woff2') format('woff2'),
    url('/fonts/Inter-Regular.woff') format('woff');
}

@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

// Remove this when this gets fixed in the UI package
* {
  /* Selection */
  &::-moz-selection {
    background: var(--amplify-colors-overlay-10);
    color: inherit;
  }

  &::selection {
    background: var(--amplify-colors-overlay-10);
    color: inherit;
  }
}

:root {
  --docsearch-primary-color: var(--amplify-colors-primary-60);
}

html {
  // this enables some alternative styles and contextual characters to the font
  // https://rsms.me/inter/#features
  font-feature-settings: 'ss01', 'ss02', 'case', 'salt';
}

body {
  padding: 0;
  margin: 0;
  line-height: 1.5;
}

/* 
  Target all plain links, typically those generated in markdown in documentation
  that don't have special classes or our primitive classes */
a:not([class]) {
  color: var(--amplify-components-link-color);

  &:hover,
  &:focus {
    color: var(--amplify-components-link-hover-color);
  }
  &:active {
    color: var(--amplify-components-link-active-color);
  }
}

a {
  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
  }
}

.amplify-alert,
.amplify-message {
  a {
    color: var(--amplify-colors-font-primary);
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
}

blockquote {
  padding: var(--amplify-space-medium);
  border-left: var(--amplify-border-widths-large) solid
    var(--amplify-colors-secondary-60);
  margin: 0 0 var(--amplify-space-medium) 0;
  background-color: var(--amplify-colors-background-secondary);
}

p {
  margin: 0;
}

ol {
  list-style-type: decimal;
}

ul {
  list-style-type: disc;
}

code {
  padding: var(--amplify-space-xxxs) var(--amplify-space-xxs);
  background-color: var(--amplify-colors-background-secondary);
  font-size: 0.875em;
  border-radius: 0.3em;
  font-family: $font-code;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

dialog {
  min-width: 50%;
  max-width: 80%;
  min-height: 20%;
  max-height: 80%;
}

h2 {
  font-size: var(--amplify-components-heading-2-font-size);
  font-weight: var(--amplify-components-heading-2-font-weight);
  margin: 0;
}

h3 {
  font-size: var(--amplify-components-heading-3-font-size);
  font-weight: var(--amplify-components-heading-3-font-weight);
}

h2[id],
h3[id] {
  position: relative;
  margin-top: var(--amplify-space-xl);
  margin-bottom: var(--amplify-space-small);
  // to offset sticky header
  scroll-margin-block-start: var(--docs-main-offset);
}

// :not[class] because we don't want this applied to custom styled headings (like in CardLinkGroup)
h2[id]:not([class]) {
  &:not(:first-of-type) {
    margin-top: var(--amplify-space-xxxl);

    &::before {
      content: '';
      position: absolute;
      top: -1rem;
      left: 0;
      width: 5rem;
      border-top: var(--amplify-border-widths-large) solid
        var(--amplify-colors-border-secondary);
    }
  }
}

h2[id] {
  margin-top: var(--amplify-space-xl);
  &:first-child {
    margin-top: 0;
  }
}

h2[id] > a,
h3[id] > a,
h4[id] > a {
  position: absolute;
  left: -1.75rem;
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

h4[id] {
  position: relative;
  scroll-margin-block-start: var(--docs-main-offset);
  > a {
    left: -1rem;
    top: -0.1rem;
    .icon-link {
      font-size: 1.2em;
    }
  }
}

.icon-link {
  opacity: 0;
  transition: opacity var(--amplify-time-medium) ease;
  font-size: 0.875em;
  font-weight: normal;
}

.icon-link::after {
  content: '#';
}

h2:hover > a .icon-link,
h3:hover > a .icon-link,
h4:hover > a .icon-link {
  opacity: 1;
}

[data-amplify-theme='amplify-docs'] {
  background-color: var(--amplify-colors-background-primary);
  color: var(--amplify-colors-font-primary);
  min-height: 100vh;

  --amplify-borders-primary: var(--amplify-border-widths-small) solid
    var(--amplify-colors-border-primary);
  --amplify-borders-secondary: var(--amplify-border-widths-small) solid
    var(--amplify-colors-border-secondary);
  --amplify-borders-tertiary: var(--amplify-border-widths-small) solid
    var(--amplify-colors-border-tertiary);

  /* custom vars */
  --docs-dev-center-nav-height: 4rem;
  --docs-header-height: 4rem;
  --docs-main-offset: calc(
    var(--docs-dev-center-nav-height) + var(--docs-header-height)
  );
  --docs-gradient-color-hsl: 210, 0%, 100%;
  --docs-callout-bg: var(--amplify-colors-primary-10);
  --docs-font-mono: 'Source Code Pro', 'Fira Code', 'Fira Mono', ui-monospace,
    SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
    monospace;
  --docs-horizontal-padding: var(--amplify-space-medium);
  --docs-sidebar-width: 22rem;

  // Algolia customizations
  --docsearch-modal-background: var(--amplify-colors-background-primary);
  --docsearch-modal-shadow: var(--amplify-shadows-small);
  --docsearch-footer-background: var(--amplify-colors-background-primary);
  --docsearch-footer-shadow: none;
  --docsearch-hit-shadow: none;
  --docsearch-hit-background: var(--amplify-colors-background-secondary);
  --docsearch-hit-color: var(--amplify-colors-font-primary);
  --docsearch-key-gradient: var(--amplify-colors-overlay-10);
  --docsearch-key-shadow: none;
  --docsearch-muted-color: var(--amplify-colors-font-tertiary);
  --docsearch-searchbox-focus-background: transparent;
  --docsearch-icon-color: var(--amplify-colors-font-disabled);

  @media (min-width: $breakpoint-medium) {
    --docs-horizontal-padding: var(--amplify-space-xl);
  }

  @media (min-width: $breakpoint-large) {
    --docs-horizontal-padding: var(--amplify-space-xxl);
  }
}

[data-amplify-theme='amplify-docs'][data-amplify-color-mode='dark'] {
  --docs-gradient-color-hsl: 210, 50%, 10%;
}

@media (prefers-color-scheme: dark) {
  [data-amplify-theme='amplify-docs'][data-amplify-color-mode='system'] {
    --docs-gradient-color-hsl: 210, 50%, 10%;
  }
}

.fade-in {
  // Only fade things in for people without reduced motion preference
  @media (prefers-reduced-motion: no-preference) {
    opacity: 0;
    transition: all var(--amplify-time-long) ease var(--amplify-time-medium);
    transform: translateY(var(--amplify-space-medium));

    &.shown {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

.expand-out {
  // Only expand things for people without reduced motion preference
  @media (prefers-reduced-motion: no-preference) {
    &.shown {
      animation: expand-out calc(2 * var(--amplify-time-long))
        cubic-bezier(0.2, 0.6, 0.3, 1) both;
    }
  }
}

@keyframes expand-out {
  0% {
    letter-spacing: calc(-1 * var(--amplify-space-xs));
    // arbitrary number found through heuristic methods, without this transform the expansion is less smooth and less noticeable.
    transform: translateZ(-500px);
    opacity: var(--amplify-opacities-0);
  }
  50% {
    opacity: var(--amplify-opacities-60);
  }
  100% {
    transform: translateZ(0);
    opacity: var(--amplify-opacities-1);
  }
}

.video {
  @supports (aspect-ratio: 1) {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
  }
}
