@use 'sass:math';
@use 'sass:list';
@use 'sass:map';
@use 'abstract/reset.scss';

@use 'base/_animations.scss';

@use 'abstract/_all.scss';
@use 'abstract/breakpoints';
@use 'abstract/fonts';
@use 'abstract/mixins';
@use 'abstract/setup';

$variable-colors: (
  c-white: #{setup.$c-white},
  c-black: #{setup.$c-black},
  c-dark-grey: #{setup.$c-dark-grey},
  c-middle-grey: #{setup.$c-middle-grey},
  c-light-grey: #{setup.$c-light-grey},
  c-primary: #{setup.$c-primary},
  c-secondary: #{setup.$c-secondary},
  c-accent: #{setup.$c-accent},
  c-error: #{setup.$c-error},
  c-sale: #{setup.$c-sale},
  c-info: #{setup.$c-info},
  c-valid: #{setup.$c-valid},
  c-warning: #{setup.$c-warning},
  c-feel: #{setup.$c-feel},
  c-feel-dark: #{setup.$c-feel-dark},
  c-feel-light: #{setup.$c-feel-light},
  c-limited: #{setup.$c-limited},
  c-success: #{setup.$c-success},
  c-alert: #{setup.$c-alert},
  c-facebook: #{setup.$c-facebook},
  c-google: #{setup.$c-google},
  c-naver: #{setup.$c-naver},
  c-wechat: #{setup.$c-wechat},
);
$variable-list: (
  break-xs: #{breakpoints.$break-xs},
  break-sm: #{breakpoints.$break-sm},
  break-md: #{breakpoints.$break-md},
  break-lg: #{breakpoints.$break-lg},
  break-xl: #{breakpoints.$break-xl},
  min-vw: #{setup.$min-vw},
  height-xs: #{setup.$height-xs},
  height-sm: #{setup.$height-sm},
  height-md: #{setup.$height-md},
  height-lg: #{setup.$height-lg},
  height-xl: #{setup.$height-xl},
  height-full: #{setup.$height-full},
  height-home: #{setup.$height-home},
  container: #{setup.$container},
  container-2: #{setup.$container-2},
  container-3: #{setup.$container-3},
  container-4: #{setup.$container-4},
  font-primary: #{fonts.$font-family-a-r},
  font-family-secondary: #{fonts.$font-family-b-r},
  font-primary-weight-light: #{fonts.$font-weight-light},
  font-primary-weight-regular: #{fonts.$font-weight-regular},
  font-primary-weight-medium: #{fonts.$font-weight-medium},
  font-primary-weight-bold: #{fonts.$font-weight-bold},
  font-secondary-weight-light: #{setup.$font-weight-secondary-light},
  font-secondary-weight-medium: #{setup.$font-weight-secondary-medium},
  xl: 1500px,
);

$variabletotals: list.length($variable-list);
$variablecolors: list.length($variable-colors);

@for $i from 1 through $variabletotals {
  .var-a-#{list.nth(map.keys($variable-list), $i)} {
    &::after {
      display: inline-block;
      content: '#{list.nth(map.keys($variable-list), $i)}';
    }
  }
  .var-b-#{list.nth(map.keys($variable-list), $i)} {
    &::after {
      content: '#{list.nth(map.values($variable-list), $i)}';
      display: inline-block;
    }
  }
}

@for $i from 1 through $variablecolors {
  .var-a-#{list.nth(map.keys($variable-colors), $i)} {
    &::before {
      display: inline-block;
      content: '#{list.nth(map.keys($variable-colors), $i)}';
    }
  }
  .var-b-#{list.nth(map.keys($variable-colors), $i)} {
    &::before {
      content: '#{list.nth(map.values($variable-colors), $i)}';
      display: inline-block;
    }
  }
}

@for $i from 1 through $variablecolors {
  .bg-#{list.nth(map.keys($variable-colors), $i)} {
    background-color: #{list.nth(map.values($variable-colors), $i)};
  }
}

@mixin tablas($spacingArray, $spacingName, $totalItems) {
  @each $name, $value in $spacingArray {
    $i: list.index(($spacingArray), ($name $value));
    $spacing0: $name;
    $spacing1: list.nth($value, 1);
    $spacing2: list.nth($value, 2);
    $spacing3: list.nth($value, 3);
    $spacing4: list.nth($value, 4);
    .#{$spacingName} {
      .filas:nth-child(#{$i}) {
        .item {
          &::after {
            content: '#{$name}';
          }
        }
        .item-0 {
          word-wrap: break-word;
        }
        .item-1 {
          &::after {
            content: '#{$spacing1}';
          }
        }
        .item-2 {
          &::after {
            content: '#{$spacing2}';
          }
        }
        .item-3 {
          &::after {
            content: '#{$spacing3}';
          }
        }
        .item-4 {
          &::after {
            content: '#{$spacing4}';
          }
        }
      }
    }
  }
}
@mixin tablas2($spacingArray, $spacingName, $totalItems) {
  @each $name, $value in $spacingArray {
    $i: list.index(($spacingArray), ($name $value));
    $spacing0: $name;
    $spacing1: list.nth($value, 1);
    .#{$spacingName} {
      .filas:nth-child(#{$i}) {
        .item {
          &::after {
            content: '#{$name}';
          }
        }
        .item-0 {
          word-wrap: break-word;
        }
        .item-1 {
          &::after {
            content: '#{$spacing1}';
          }
        }
      }
    }
  }
}
@mixin tablas3($spacingArray, $spacingName, $totalItems) {
  @each $name, $value in $spacingArray {
    $i: list.index(($spacingArray), ($name $value));
    $spacing0: $name;
    $spacing1: list.nth($value, 1);
    $spacing2: list.nth($value, 2);
    $spacing3: list.nth($value, 3);
    .#{$spacingName} {
      .filas:nth-child(#{$i}) {
        .item {
          &::after {
            content: '#{$name}';
          }
        }
        .item-0 {
          word-wrap: break-word;
        }
        .item-1 {
          &::after {
            content: '#{$spacing1}';
          }
        }
        .item-2 {
          &::after {
            content: '#{$spacing2}';
          }
        }
        .item-3 {
          &::after {
            content: '#{$spacing3}';
          }
        }
      }
    }
  }
}
@mixin muestraArray($nombreArray, $nombreClase, $totalItems) {
  @each $name, $value in $nombreArray {
    $i: list.index($nombreArray, $name $value);

    .#{$nombreClase} {
      .filas:nth-child(#{$i}) {
        .item {
          &::after {
            content: '#{$name}';
          }
        }

        @for $j from 1 through $totalItems {
          .item-#{$j} {
            &::after {
              content: '#{list.nth($value, $j)}';
            }
          }
        }
      }
    }
  }
}

@include tablas(setup.$margin, 'marginbox', 2);
@include tablas(setup.$margin-y, 'marginbox-y', 2);
@include tablas(setup.$margin-x, 'marginbox-x', 2);
@include tablas(setup.$margin-top, 'marginbox-top', 2);
@include tablas(setup.$margin-right, 'marginbox-right', 2);
@include tablas(setup.$margin-bottom, 'marginbox-bottom', 2);
@include tablas(setup.$margin-left, 'marginbox-left', 2);
@include tablas(setup.$padding, 'paddingbox', 2);
@include tablas(setup.$padding-y, 'paddingbox-y', 2);
@include tablas(setup.$padding-x, 'paddingbox-x', 2);
@include tablas(setup.$padding-top, 'paddingbox-top', 2);
@include tablas(setup.$padding-left, 'paddingbox-left', 2);
@include tablas(setup.$padding-bottom, 'paddingbox-bottom', 2);
@include tablas(setup.$padding-right, 'paddingbox-right', 2);

@include muestraArray(setup.$heights, 'heights', 2);
@include muestraArray(setup.$headersFluids, 'fluids', 3);
@include muestraArray(setup.$minheaders, 'minheaders', 4);

.font-family-a {
  &::after {
    content: '' + fonts.$font-family-a-r;
    position: relative;
  }
}
.font-family-b {
  &::after {
    content: '' + fonts.$font-family-b-r;
    position: relative;
  }
}
.font-family-c {
  &::after {
    content: '' + fonts.$font-family-c-r;
    position: relative;
  }
}
.mini-site-main {
  padding-left: 200px;
  padding-right: 20px;
}
.tag-color-wrap {
  .wrap-item {
    position: relative;
    width: 100%;
    margin: 10px 10px 0 0;
    padding: 5px;
    box-shadow: 0 9px 25px rgb(0 0 0 / 15%);

    &::after {
      position: absolute;
      margin-top: -50px;
      bottom: 10px;
      font-size: 12px;
      left: 16px;
    }
    ::before {
      width: 100%;
      text-align: center;
      position: absolute;
      z-index: 10;
      font-size: 12px;
      margin-top: -40px;
      left: 0;

      color: white;
      bottom: 27px;
    }
    .item {
      height: 100px;
      margin: 0;
      position: relative;

      &::after {
        font-size: 12px;
        position: absolute;
        margin-top: -20px;
        width: 100%;
      }
    }
  }
}

.site-menu-mobile {
  background-color: #000;
  position: fixed;
  height: 100vh;
  width: 60px;
}

.guide {
  section {
    padding-bottom: 20px;
  }
  .element-code {
    width: 100%;
    max-width: 500px;
    min-height: 200px;
    margin: 20px auto;
  }
  .bg-dark {
    background-color: setup.$primary-guide;
    color: #fff;
    a {
      color: #fff;
    }
  }
  .title-zone {
    color: #000;
    margin-bottom: 20px;
    padding: 100px 0 10px;
  }
  .site-main {
    position: relative;
    margin: 0 0 0 55px;
    padding: 0 8px;
    @media (min-width: breakpoints.$break-lg) {
      margin: 0 0 0 180px;
    }
  }
  .mb-5 {
    margin-bottom: 5px;
  }
  .menu-lateral ul.list-clear li {
    margin: 0;
    line-height: 1.2;
  }
  .menu-lateral {
    padding-left: 10px;
  }
  .guide-logo-menu {
    img {
      padding-top: 20px;
    }
  }
  .list-clear {
    margin-bottom: 30px;
  }
  .guide-title {
    color: #878787;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif !important;
    text-transform: uppercase;
  }
  .guide-text {
    text-align: center;
    width: 100%;
    color: #b7c1c8;
    font-size: 8px;
    font-family: Arial, Helvetica, sans-serif !important;
    text-transform: uppercase;
    padding: 10px 0;
    float: left;
    span {
      width: 100%;
      clear: both;
      float: left;
    }
  }
  .menulateral {
    position: fixed;
    top: 62px;
    overflow: auto;
    height: calc(100vh - 62px);
    font-size: 10px;
    box-sizing: border-box;
    -webkit-box-flex: 0;
    width: 180px;
    padding: 0 0 0 20px;
    html {
      font-size: 12px;
    }
  }
  .guide-hover {
    text-decoration: none;
    opacity: 0.6;
  }
  code[class*='language-'],
  pre[class*='language-'] {
    font-size: 12px;
  }
  table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    caption-side: bottom;
    font-size: 12px;
    text-align: left;
    th:nth-child(1) {
      width: 150px;
    }
    thead,
    tbody,
    tfoot {
      tr {
        th,
        td {
          padding: 10px;
          vertical-align: top;
          border: 1px solid #eaeaea;
          p:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
    td:first-child > code {
      white-space: nowrap;
    }
    thead {
      background-color: setup.$primary-guide;
      color: #fff;
    }
    td {
      &:first-child {
        color: setup.$primary-guide !important;
      }
    }
  }
  code {
    background-color: #f1f1f1;
    padding-left: 4px;
    padding-right: 4px;
    color: setup.$secondary-guide;
  }
  pre > code {
    background-color: transparent;
  }
  a {
    text-decoration: none;
  }
  .item-w {
    width: 40px;
    height: 40px;
    padding: 4px;
    background: #eceff3;
  }
  .item-i {
    min-width: 20%;
    min-height: 20%;
    display: block;
    border: 1px solid #fff;
    box-sizing: border-box;
  }
  .item-i:nth-child(1) {
    background-color: setup.$primary-guide;
    opacity: 0.93;
  }
  .item-i:nth-child(2) {
    background-color: setup.$primary-guide;
    opacity: 0.83;
  }
  .item-i:nth-child(3) {
    background-color: setup.$primary-guide;
    opacity: 0.79;
  }
  .item-i:nth-child(4) {
    background-color: setup.$primary-guide;
    opacity: 0.72;
  }
  .item-i:nth-child(5) {
    background-color: setup.$primary-guide;
    opacity: 0.65;
  }
  .item-i:nth-child(6) {
    background-color: setup.$primary-guide;
    opacity: 0.58;
  }
  .item-i:nth-child(7) {
    background-color: setup.$primary-guide;
    opacity: 0.51;
  }
  .item-i:nth-child(8) {
    background-color: setup.$primary-guide;
    opacity: 0.44;
  }
  .item-i:nth-child(9) {
    background-color: setup.$primary-guide;
    opacity: 0.37;
  }
  .item-i:nth-child(10) {
    background-color: setup.$primary-guide;
    opacity: 0.3;
  }
  .box-demo,
  .box-demo2 {
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid #fff;
  }
  .box-demo-inner {
    height: 200px;
    border: 1px solid #fff;
    background-color: setup.$primary-guide;
    opacity: 0.6;
    font-size: 20px;
    padding-top: 100px;
    text-align: center;
    color: #fff;
  }
  .box-demo:nth-child(1) {
    background-color: rgb(0 191 203 / 20%);
  }
  .box-demo:nth-child(2) {
    background-color: rgb(0 191 203 / 20%);
  }
  .box-demo:nth-child(3) {
    background-color: rgb(0 191 203 / 20%);
  }
  .box-demo2:nth-child(1) {
    background-color: rgb(255 33 33 / 20%);
  }
  .box-demo2:nth-child(2) {
    background-color: rgb(255 33 33 / 20%);
  }
  .box-demo2:nth-child(3) {
    background-color: rgb(255 33 33 / 20%);
  }
  .box-demo .col {
    font-size: 12px;
    background-color: rgb(0 191 203 / 60%);
    border: 1px solid #fff;
  }
  .flexbox-map {
    .h3 {
      min-height: 50px;
      font-size: 20px;
      background-color: rgb(33 255 214 / 33%);
      padding: 20px;
    }
  }
  .box-info {
    padding: 20px;
    border: 1px solid gray;
    font-style: italic;
    opacity: 0.5;
  }
  .guide-icon-top {
    display: inline-block;
  }
  .resize-container {
    position: relative;
    min-height: 400px;
    display: flex;
    padding: 50px 0;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
  }
  .mini-box {
    background: #eaeaea;
    width: 100px;
    color: #757171;
    font-size: 10px;
    float: left;
    margin: 11px;
  }
}
pre[class*='language-'] {
  margin: 20px 0;
}
.mini-box {
  span {
    @include mixins.font-bold;
    display: block;
    font-size: 14px;
  }
}
.filas {
  line-height: 2;
}

.item {
  white-space: nowrap;
}
.bg-docs {
  background: #fafafa;
}

.grid-6-docs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 0;

  div:nth-child(6n + 3),
  div:nth-child(6n + 4) {
    background-color: #eaeaea;
  }

  div {
    border-bottom: 1px solid #f6f6f6;
    padding: 6px;
  }

  div:nth-child(6n + 1),
  div:nth-child(6n + 3),
  div:nth-child(6n + 5) {
    font-size: 14px;
    font-weight: bold;
  }
}

.grid-8-docs {
  display: grid;
  grid-template-columns: repeat(8, 1fr);

  &:nth-child(even) {
    background-color: #f7f6f6; /* Cambia el color de fondo de las filas pares */
  }

  /* Opcional: Estilos para filas impares */
  &:nth-child(odd) {
    background-color: #fff; /* Cambia el color de fondo de las filas impares */
  }
}

.grid-24-docs {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 16px;
  align-items: start;
}

.grid-10-docs {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  border-bottom: 1px dashed #d8d8d8;
  border-left: 1px dashed #d8d8d8;

  align-items: start;
  div {
    padding: 10px;
    border-top: 1px dashed #d8d8d8;
    border-right: 1px dashed #d8d8d8;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.grid-4-docs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px dashed #d8d8d8;
  border-left: 1px dashed #d8d8d8;

  align-items: start;
  & > div {
    padding: 10px;
    border-top: 1px dashed #d8d8d8;
    border-right: 1px dashed #d8d8d8;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}