@use 'variables' as *;

:root {
    --main-height: #{$main-height};
    --nav-height: #{$nav-height};
    --header-height: #{$header-height};
    --max-width: #{$max-width};
    --icon-s: #{$icon-s};
    --icon-m: #{$icon-m};
}

@media screen and (min-width: #{$max-width}) {
    :root {
        --main-height: #{$main-height-1024};
    }
}

:root {
    --border-radius: #{$border-radius};
    --border: #{$border};
    --box-shadow: #{$box-shadow};
}

a {
    color: var(--primary);
    background-color: transparent;
    font-weight: 700;
    font-family: var(--font-family-secondary);
    line-height: 1.5;
    text-decoration: underline;
    text-decoration-color: var(--tertiary);
    text-decoration-skip-ink: none;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
    transition: text-decoration-color 0.15s ease-out;
  
    &:hover {
      text-decoration-color: var(--secondary);
    }
  
    &:visited {
      color: var(--primary);
    }
}

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