@import './_reset.scss';
@import './_fonts.scss';
@import './_colors.scss';
@import './_easings.scss';
@import './_functions.scss';
@import './_layout.scss';
@import './_utils.scss';
@import './_font-style.scss';
@import './_themes.scss';
@import './_scroll.scss';

:root {
  --header-height: #{mobile-vw(58px)};

  @include desktop {
    --header-height: #{desktop-vw(98px)};
  }
}

html {
  font-weight: bolder;
  font-family: Arial, Helvetica, sans-serif;
  font-family: var(--font);
  background-color: var(--theme-primary);
  color: var(--theme-secondary);
  scrollbar-width: thin;

  &.nav {
    overflow: hidden;
  }
}

html,
body {
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
}

// custom cursor
// html.has-custom-cursor {
//   &,
//   * {
//     &,
//     &::before,
//     &::after {
//       cursor: none !important;
//     }
//   }
// }

a,
button,
input,
label,
textarea,
select {
  color: inherit;
  cursor: pointer;
}

*::selection {
  background-color: var(--theme-secondary);
  color: var(--theme-primary);
}

svg.icon {
  path[fill],
  rect[fill],
  circle[fill] {
    fill: currentColor;
  }

  path[stroke],
  rect[stroke],
  circle[stroke] {
    stroke: currentColor;
  }
}

.decorate {
  position: relative;
  color: var(--green);
  transition: color 0.95s cubic-bezier(0.19, 1, 0.22, 1);

  &:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.075em;
    min-height: 1px;
    transform: scaleX(1);
    transform-origin: left;
    background-color: currentColor;
    transition: transform 0.95s cubic-bezier(0.19, 1, 0.22, 1);
  }

  @include mobile {
    color: currentColor;
  }

  @include desktop {
    @include hover {
      &:not(:hover) {
        color: currentColor;

        &:before {
          transform-origin: right;
          transform: scaleX(0);
        }
      }
    }
  }
}
