@use "../../../settings/constants";

.mykn-datagrid {
  --mykn-datagrid-spacing-h: var(--sizes-spacing-s-h);
  --mykn-datagrid-spacing-v: var(--sizes-spacing-s-v);

  background-color: var(--datagrid-background);
  border-radius: var(--sizes-border-radius-s);
  display: flex;
  flex-direction: column;
  width: 100%;

  &--compact {
    --mykn-datagrid-spacing-h: var(--sizes-spacing-xs-h);
    --mykn-datagrid-spacing-v: var(--sizes-spacing-xs-v);
  }

  &__toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
  }

  &__scrollpane {
    height: 100%;
  }

  &__scrollpane--overflow-x {
    overflow-x: auto;
  }

  &__scrollpane--overflow-y {
    overflow-y: auto;
  }

  &__scrollpane ~ .mykn-toolbar {
    border-block-start: 1px solid var(--datagrid-border);
  }

  &__header {
    padding-block: var(--mykn-datagrid-spacing-v);
    padding-inline: var(--mykn-datagrid-spacing-h);
  }

  &__table {
    border-spacing: 0;
    width: 100%;
  }

  &__table--layout-fixed {
    @media screen and (min-width: constants.$breakpoint-desktop) {
      table-layout: fixed;
    }
  }

  &__thead {
    background-color: var(--datagrid-background);
    position: sticky;
    top: 0;
    z-index: 20;
  }

  &__toolbar ~ &__scrollpane:not(&__scrollpane--overflow-y) &__thead {
    top: var(--mykn-datagrid-thead-top-base, 0px);
  }

  &__thead &__row--filter {
    background-color: var(--datagrid-header-background);

    .mykn-stackctx,
    .mykn-input,
    .mykn-select {
      width: 100%;
    }

    .mykn-checkbox {
      align-self: flex-end;
    }
  }

  &__thead &__cell {
    text-align: start;
  }

  &__thead .mykn-form-control,
  &__tbody .mykn-form-control {
    gap: 0;
    width: 100%;
  }

  &__row--selected {
    background-color: var(--datagrid-row-active);
  }

  &__cell {
    border-block-start: 1px solid transparent;
    border-block-end: 1px solid var(--datagrid-border);
    box-sizing: border-box;
    padding: var(--mykn-datagrid-spacing-v) var(--mykn-datagrid-spacing-h);
    position: relative;

    .mykn-a:not(:last-child) {
      margin-inline-end: var(--mykn-datagrid-spacing-h);

      + .mykn-p {
        display: inline;
      }
    }
  }

  &:not(#{&}--wrap) &__cell {
    white-space: nowrap;
  }

  &:not(#{&}--wrap) &__cell > .mykn-p {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__row:last-child &__cell {
    border-block-end: none;
  }

  &__cell--filter {
    padding-inline: var(--sizes-spacing-xs-h);
    padding-block: var(--sizes-spacing-xs-v);
  }

  &__cell--checkbox,
  &__cell--type-boolean,
  &__cell--type-jsx,
  &__cell--type-null,
  &__cell--type-number {
    text-align: end;
    width: 0; // TODO: Possibly 1px for WebKit (Safari)?
  }

  &__cell--checkbox {
    @media screen and (min-width: constants.$breakpoint-desktop) {
      max-width: calc(
        var(--typography-line-height-body-s) + var(--mykn-datagrid-spacing-h)
      );
      width: calc(var(--mykn-datagrid-spacing-h) * 2 + 20px);
    }
  }

  &__cell--editable .mykn-button {
    border-inline: none;
  }

  &__cell--editable#{&}__cell--type-boolean .mykn-form-control {
    align-items: flex-end;
  }

  &__cell--editable:not(#{&}__cell--type-boolean) .mykn-form-control {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    //z-index: 1000;  // Fixme: gives issues with editing=true

    [class^=mykn][class*=input],  // wide to accept variations.
    .mykn-select {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }
  }

  &__footer {
    box-sizing: border-box;
    padding: var(--sizes-spacing-xs-v) var(--sizes-spacing-xs-h);
  }

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

  .mykn-form {
    flex: 1 1 auto;
    height: unset !important;

    &__fieldset {
      flex: 1 1 auto;
      height: unset !important;
    }
  }
}