@use '../mixins/grid';
@use '../variables/breakpoint';

:root {
  --k-grid-gap: var(--grid-gap-lg);
  --k-container-grid-gap: var(--container-gap-lg);
  --k-container-grid-padding: var(--container-padding-lg);
  --k-container-margin: var(--grid-container-margin-lg);

  @media #{breakpoint.$grid-breakpoint-md} {
    --k-grid-gap: var(--grid-gap-md);
    --k-container-grid-gap: var(--container-gap-md);
    --k-container-grid-padding: var(--container-padding-md);
    --k-container-margin: var(--grid-container-margin-md);
  }

  @media #{breakpoint.$grid-breakpoint-sm} {
    --k-grid-gap: var(--grid-gap-sm);
    --k-container-grid-gap: var(--container-gap-sm);
    --k-container-grid-padding: var(--container-padding-sm);
    --k-container-margin: var(--grid-container-margin-sm);
  }
}

.k-main-container {
  max-width: var(--grid-container-max-width);
  width: 100%;
  box-sizing: border-box;
}

.k-container {
  --k-grid-gap: var(--k-container-grid-gap);
  display: flex;
  flex-direction: column;
  background-color: var(--color-layer-floor-1);
  border-radius: var(--border-radius-3);
  padding: var(--k-container-grid-padding);
  gap: var(--k-container-grid-gap) 0;
}

.k-row,
.k-row-container {
  --k-row-gap-x: calc(var(--k-grid-gap) / 2);
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--k-row-gap-x) * -1);
  margin-right: calc(var(--k-row-gap-x) * -1);
}

.k-row {
  &_align {
    &-start {
      align-items: flex-start;
    }

    &-center {
      align-items: center;
    }

    &-end {
      align-items: flex-end;
    }
  }

  &_justify {
    &-left {
      justify-content: flex-start;
    }

    &-center {
      justify-content: center;
    }

    &-right {
      justify-content: flex-end;
    }

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

.k-row-container {
  gap: var(--k-grid-gap) 0;
}

.k-col {
  flex: 1 0 0%;
  width: 100%;
  max-width: 100%;
  padding-left: var(--k-row-gap-x);
  padding-right: var(--k-row-gap-x);
  box-sizing: border-box;

  @include grid.generate-columns(12, var(--k-row-gap-x));

  &_justify {
    &-left {
      display: flex;
      justify-content: flex-start;
    }

    &-center {
      display: flex;
      justify-content: center;
    }

    &-right {
      display: flex;
      justify-content: flex-end;
    }
  }

  &_lg {
    @include grid.generate-columns(12, var(--k-row-gap-x));
  }

  @media #{breakpoint.$grid-breakpoint-md} {
    &_md {
      @include grid.generate-columns(12, var(--k-row-gap-x));
    }
  }

  @media #{breakpoint.$grid-breakpoint-sm} {
    &_sm {
      @include grid.generate-columns(12, var(--k-row-gap-x));
    }
  }
}

/** @deprecated */
.k-col__gap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--k-grid-gap);
}

.k-button-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);

  @media #{breakpoint.$grid-breakpoint-sm} {
    flex-wrap: wrap-reverse;

    & > * {
      flex: 0 0 100%;
    }
  }
}