// Typography
$font-primary: 'Nunito Sans', sans-serif;

// Colors
$color-text: #403F5D;
$color-text-light: #A1A1AA;
$color-primary: #00688C;
$color-primary-light: #ECF8FD;
$color-btn: #3FBCE8;
$color-btn-hover: #23a6d4;
$color-btn-active: #00688c;
$color-border: #DCDCE1;
$color-border-focus: #23A6D4;
$color-disabled: #DCDCE1;
$color-bg-card: #FFFFFF;
$color-danger: #9C002F;
$color-icon-hover: #f2f2f5;

$spacer: 4px;
$spacers: 1, 2, 3, 4, 5, 6, 10, 12, 16;

@each $i in $spacers {
  .spacing-m-t-#{$i} {
    margin-top: $i * 4px;
  }

  .spacing-m-b-#{$i} {
    margin-bottom: $i * 4px;
  }

  .spacing-m-l-#{$i} {
    margin-left: $i * 4px;
  }

  .spacing-m-r-#{$i} {
    margin-right: $i * 4px;
  }

  .spacing-p-t-#{$i} {
    padding-top: $i * 4px;
  }

  .spacing-p-b-#{$i} {
    padding-bottom: $i * 4px;
  }

  .spacing-p-l-#{$i} {
    padding-left: $i * 4px;
  }

  .spacing-p-r-#{$i} {
    padding-right: $i * 4px;
  }
}

.body-s-bold {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.body-xs {
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

.body-xxs {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}

.body-xs-bold {
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
}

.underline {
  text-decoration: underline;
}

.content-link {
  cursor: pointer;
  color: $color-primary;
}

.content-primary {
  color: $color-primary;
}

.content-danger {
  color: $color-danger !important;
}

.bg-primary-10 {
  background-color: $color-primary-light;
}

@mixin flex-center {
  display: flex;
  align-items: center;
}

@mixin transition {
  transition: all 0.2s ease-in-out, width 0ms, margin 0ms !important;
}

.flex-row-align-center {
  @include flex-center;
  flex-direction: row;
}

.flex-column-align-center {
  @include flex-center;
  flex-direction: column;
}

.flex-column-align-start {
  display: flex;
  align-items: start;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.full-width {
  width: 100% !important;
}

.full-height {
  height: 100% !important;
}

._hidden {
  display: none;
}