@use 'valaxy/client/styles/mixins/index.scss' as *;

.link {
  color: var(--sakura-color-primary);
}

html {
  color: var(--sakura-color-text);
}

body {
  font-family: var(--sakura-font-family);
  text-shadow: 0 0 1px oklch(0% 0 0 / 10%);

  @media (width <= 767px) {
    min-width: 320px;
  }
}

body::-webkit-scrollbar-thumb {
  background: var(--sakura-color-primary);
}

a {
  color: var(--sakura-color-primary);
  transition: color 0.2s ease-out;

  &:hover {
    color: var(--sakura-color-action);
  }
}

.sakura-site-content {
  padding-inline: max(20px, env(safe-area-inset-left));
}

.sakura-safe-padding {
  padding-inline: max(20px, env(safe-area-inset-left));
  transition: padding var(--va-transition-duration) ease;

  @include screen('sm') {
    padding-inline: max(40px, env(safe-area-inset-left));
  }
}