/* Layout Utility */

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-row-inline {
  display: inline-flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-inline {
  display: inline-flex;
  flex-direction: column;
}

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

@for $index from 0 through 8 {
  .flex-grow-#{$index} {
    flex-grow: $index;
  }
  .flex-shrink-#{$index} {
    flex-shrink: $index;
  }
}

@for $index from 0 through 64 {
  .gap-#{$index} {
    gap: 1px * $index;
  }
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-center {
  align-items: center;
}

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

.flex-content-start {
  justify-content: flex-start;
}

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

.flex-content-end {
  justify-content: flex-end;
}

/* Bluesea Layout */

.bs-layout-horizontal {
  @extend .flex-row;

  > * {

  }
}

.bs-layout-horizontal-wrap {
  @extend .bs-layout-horizontal;
  @extend .flex-wrap;
}

.bs-layout-horizontal-inline {
  @extend .flex-row-inline;
}

.bs-layout-vertical {
  @extend .flex-column;

  > * {

  }
}

.bs-layout-vertical-wrap {
  @extend .bs-layout-vertical;
  @extend .flex-wrap;
}

.bs-layout-vertical-inline {
  @extend .flex-column-inline;
}

.bs-layout-form {

  border-bottom: 1px solid var(--border);

  > div {
    display: flex;
    align-items: center;

    > .title {
      padding: 8px 16px;
      width: 12.3076em;
      line-height: 1.2em;
      color: var(--body-text);
    }

    > :not(.title) {
      padding: 8px;
      width: 10em;
      flex-grow: 1;
      color: var(--body-text);
    }

    &:nth-child(odd) {
      background-color: var(--gray-100);
    }
  }

  &.title-w-8 > div > .title {
    width: 8em;
  }

  &.title-w-10 > div > .title {
    width: 10em;
  }

  &.title-w-14 > div > .title {
    width: 14em;
  }

  &.title-w-16 > div > .title {
    width: 16em;
  }

  &.title-w-18 > div > .title {
    width: 18em;
  }

  &.title-w-20 > div > .title {
    width: 20em;
  }
}

.bs-layout-card {

  > .card-title {
    padding: 16px 0;
    border-bottom: 0.8px solid var(--border-light);
    font-size: 1.2em;
    font-weight: 500;
  }
}

//$table-row-odd-color: $white;
//$table-row-even-color: $gray-100;

.bs-layout-table {
  border-collapse: collapse;

  > tr > td, > tr > th, > tbody > tr > td, > tbody > tr > th {
    padding: 8px;
    border: 1px solid var(--border);
    vertical-align: middle;
    text-align: left;

    &:first-child {
      border-left: 0;
    }

    &:last-child {
      border-right: 0;
    }
  }

  //> tr:nth-child(odd) {
  //  background-color: $table-row-odd-color;
  //}
  //
  //> tr:nth-child(even) {
  //  background-color: $table-row-even-color;
  //}
}