.flex-table {
  --row-padding: #{$card-padding}; //? first and last cell in a row

  overflow: auto;
  padding-bottom: $card-padding;

  &.--dialog-padding {
    --row-padding: #{$dialog-padding};
  }

  //? row based (default)
  .row {
    --default-basis: 140px;

    display: flex;

    .cell {
      min-width: 0;
      min-height: 48px;
      border-bottom: 1px solid;
      flex: 1 0 var(--default-basis);
      padding: 2px ($card-padding * 0.5);
      display: flex;
      flex-direction: column;
      justify-content: center;

      &:first-child {
        padding-left: var(--row-padding);
      }

      &:last-child {
        padding-right: var(--row-padding);
      }

      &.--sticky {
        &-left {
          position: sticky;
          left: 0;
          border-right: 1px solid;
        }

        &-right {
          position: sticky;
          right: 0;
          border-left: 1px solid;
        }
      }

      &.--justify-start {
        align-items: flex-start;
        text-align: left;
      }

      &.--justify-center {
        align-items: center;
        text-align: center;
      }

      &.--justify-end {
        align-items: flex-end;
        text-align: right;
      }

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

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

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

      &.--basis {
        &-40 {
          flex-basis: 40px;
        }

        &-60 {
          flex-basis: 60px;
        }

        &-80 {
          flex-basis: 80px;
        }

        &-100 {
          flex-basis: 100px;
        }

        &-120 {
          flex-basis: 120px;
        }

        &-140 {
          flex-basis: 140px;
        }

        &-160 {
          flex-basis: 160px;
        }

        &-180 {
          flex-basis: 180px;
        }

        &-200 {
          flex-basis: 200px;
        }

        &-220 {
          flex-basis: 220px;
        }

        &-240 {
          flex-basis: 240px;
        }

        &-260 {
          flex-basis: 260px;
        }

        &-280 {
          flex-basis: 280px;
        }

        &-300 {
          flex-basis: 300px;
        }

        &-320 {
          flex-basis: 320px;
        }

        &-340 {
          flex-basis: 340px;
        }

        &-360 {
          flex-basis: 360px;
        }

        &-380 {
          flex-basis: 380px;
        }

        &-400 {
          flex-basis: 400px;
        }
      }
    }

    &:last-child .cell {
      border-bottom: 0;
    }
  }

  //? col based
  &.--columns {
    display: flex;

    //* column width
    .col {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    //* cell height
    .cell {
      flex: 0 0 48px; // height
      overflow: hidden;
      padding: 2px ($card-padding * 0.5);
      border-bottom: 1px solid;
      display: flex;
      align-items: center;

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

      &.--header {
        position: sticky;
        top: 0;
        z-index: 1000;
      }

      &.--first {
        padding-left: var(--row-padding);
      }

      &.--last {
        padding-right: var(--row-padding);
      }
    }
  }
}