/**
 *	Set base font size to 10px
 *	This makes calculating rem values very easy
 *	Just divide your pixel value by 10
 *	Need an rem value that matches 13px? 1.3rem
 *	Need an rem value that matches 27px? 2.7rem
 */
:root {
  font-size: 10px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-wrap: break-word;
  -ms-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  -webkit-font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  color: var(--body-font-color);
  font: var(--body-font);
}

/**
 *	Reset element margins
 */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
button {
  margin: 0;
  padding: 0;
}

p,
span {
  color: var(--body-font-color);
}

a {
  color: var(--anchor-link-normal-color);
  text-decoration: none;
  text-decoration: none;
  text-decoration-color: var(--anchor-link-normal-color);
  text-underline-offset: 2px;
}

button {
  border: none;
}

h1 {
  font: normal normal #{$font-weight-regular} 2.4rem / 1.75 var(--body-font-primary);
  color: var(--h1-color);
  @include media-min($medium) {
    font-size: clamp(2.4rem, 3.65vw, 3.6rem);
  }
  &.medium {
    font-size: clamp(2.4rem, 3.65vw, 2.8rem);
  }
}

h2 {
  font: normal normal #{$font-weight-regular} 2.4rem / 1.75 var(--body-font-primary);
  color: var(--h2-color);
  @include media-min($medium) {
    font-size: clamp(2.4rem, 3.65vw, 2.8rem);
  }
}

h3 {
  font: normal normal #{$font-weight-regular} 2.4rem / 1.75 var(--body-font-primary);
  color: var(--h3-color);
}

h4 {
  font: normal normal #{$font-weight-regular} 2rem / 1.75 var(--body-font-primary);
  color: var(--h4-color);
}

h5 {
  font: normal normal #{$font-weight-regular} 1.8rem / 1.75 var(--body-font-primary);
  color: var(--h5-color);
  &.sub-title {
    color: var(--h5-sub-title-color);
  }
}

h6 {
  font: normal normal #{$font-weight-regular} 1.6rem / 1.75 var(--body-font-primary);
  color: var(--h6-color);
}

h2,
h3,
h4,
h5,
h6 {
  + * {
    margin-top: 1.6rem;
  }
}

mark {
  background-color: transparent;
  color: $red;
}

p + p {
  margin-top: 1.6rem;
}

.text-small {
  font-size: 1.4rem;
}

.text-normal {
  font-size: 1.6rem;
}

.text-medium {
  font-size: 1.8rem;
}

.text-large {
  font-size: 2rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

@include media-min($large) {
  .lg\:text-left {
    text-align: left;
  }
}

.text-right {
  text-align: right;
}

.font-poppins {
  font-family: $font-poppins;
}

$fontSize: (
  xs: 12,
  sm: 14,
  base: 16,
  lg: 18,
  xl: 20,
  2xl: 24,
  3xl: 30,
  4xl: 32,
  5xl: 36,
  6xl: 40
);

@each $size, $var in $fontSize {
  .text-#{$size} {
    font-size: #{$var}px;
  }
}

$colors: (
  white: $white,
  white-400: $white-400,
  white-600: $white-600,
  white-800: $white-800,
  gray-light: $gray-light,
  black: $black,
  black-400: $black-400,
  black-600: $black-600,
  black-800: $black-800,
  sky: $sky,
  blue: $blue,
  blue-light: $blue-light,
  blue-medium: $blue-medium,
  blue-bilibili: #20aae2,
  blue-linkedin: #0a66c2,
  dark: $dark,
  green: $green,
  gray: $gray,
  pink: $pink,
  purple: $purple,
  yellow: $yellow,
  red: $red,
  orange: $orange
);

@each $color, $var in $colors {
  .text-#{$color} {
    color: #{$var};
  }
  .hover\:text-#{$color}:hover {
    color: #{$var};
  }
}

.text-blue-gradient {
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-image: linear-gradient(277.4deg, $blue, $sky);
}

$fontWeight: (
  thin: 100,
  xlight: 200,
  light: 300,
  regular: 400,
  medium: 500,
  semibold: 600,
  bold: 700,
  xbold: 800,
  black: 900
);
@each $weight, $var in $fontWeight {
  .font-#{$weight} {
    font-weight: #{$var};
  }
}

$opacity: (0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100);
@each $var in $opacity {
  .opacity-#{$var} {
    opacity: calc($var/100);
  }
  .hover\:opacity-#{$var}:hover {
    opacity: calc($var/100);
  }
}

.border-transparent {
  border: 1px solid transparent;
}

.border {
  border: 1px solid var(--default-border-color);
}

.hover\:border:hover {
  border: 1px solid var(--default-border-color);
}

.border-t {
  border-top: 1px solid var(--default-border-color);
}

.border-r {
  border-right: 1px solid var(--default-border-color);
}

.border-b {
  border-bottom: 1px solid var(--default-border-color);
}

.border-y {
  border-top: 1px solid var(--default-border-color);
  border-bottom: 1px solid var(--default-border-color);
}

.underline {
  text-decoration: underline;
}

.hover\:underline:hover {
  text-decoration: underline;
}

.line {
  position: relative;
  padding-left: 1.6rem;
  &::before {
    content: '';
    display: block;
    width: 0.4rem;
    height: 60%;
    background-color: $blue;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
  &-full {
    &::before {
      height: 80%;
    }
  }
  &-purple {
    &::before {
      content: '';
      background-color: $purple;
    }
  }
  &-orange {
    &::before {
      content: '';
      background-color: $orange;
    }
  }
}

.shadow {
  box-shadow: 0 8px 20px 0 rgb(0 0 0 / 10%);
}

$rounded: (
  none: 0,
  sm: 6,
  md: 8,
  lg: 10,
  xl: 12,
  xxl: 16,
);

.rounded {
  border-radius: 2px;
}

@each $size, $var in $rounded {
  .rounded-#{$size} {
    border-radius: #{$var / $font-base}rem;
  }
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overflow-ellipsis-line-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overflow-ellipsis-line-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overflow-ellipsis-line-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-none {
  list-style: none;
}

$list-disc-colors: (
  'green': $green,
  'blue': $blue,
  'orange': $orange
);
@each $color, $var in $list-disc-colors {
  .list-disc-#{$color} {
    list-style: none;
    margin-left: 0 !important;
    li {
      position: relative;
      padding-left: 20px;
      &:before {
        content: '';
        background: $var;
        width: 8px;
        height: 8px;
        display: block;
        border-radius: 50%;
        position: absolute;
        left: 0;
        top: 10px;
      }
    }
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: $white;
  color: $table-font-color;
  border: 1px solid $table-border-color;

  th,
  td {
    color: $black;
    padding: 1rem 1.6rem;
    border-bottom: 1px solid $table-border-color;
    word-break: break-all;
  }

  th {
    font-size: 2.4rem;
    &:not(:last-child) {
      border-right: 1px solid $table-border-color;
    }
  }

  tr {
    &:last-child {
      td {
        border-bottom: 1px solid $table-border-color;
      }
    }
    td:not(:last-child) {
      border-right: 1px solid $table-border-color;
    }
  }

  tr.no-border {
    th,
    td {
      border: none;
    }
  }

  &.no-border {
    border: none;
    th,
    td {
      padding: 1rem 0;
      border-right: none !important;
    }
  }

  .icon-check {
    font-size: 2.4rem;
  }
}

.tag {
  padding: 0.2rem 1.6rem;
  font-size: 14px;
  border: 1px solid $white;
  color: $white;
  &.green {
    border: 1px solid $green;
    background-color: $green;
  }
  &.blue {
    border: 1px solid #3639B9;
    background-color: #3639B9;
  }
  &.orange {
    border: 1px solid #e6742e;
    background-color: #e6742e;
  }
}

.cursor-pointer {
  cursor: pointer;
}