@import '../common/narrow-window';
@import '../common/stippling';

$grid-cell-size: 1.5rem;

.bx--data-table,
.kui--table-like {
  [data-tag='badge'] {
    display: flex;
    align-items: center;
  }
  [data-tag='badge-circle'] {
    margin-right: 1ex;
    width: 0.875rem;
    height: 0.875rem;
    background-color: var(--color-ui-05);
  }
  [data-tag='badge-circle'].green-background {
    background-color: var(--color-green);
    color: var(--color-ui-01);
  }
  [data-tag='badge-circle'].yellow-background,
  button.yellow-background {
    background: var(--color-yellow);
    color: var(--color-ui-01);
  }
  [data-tag='badge-circle'].red-background {
    --color1: var(--color-light-red);
    --color2: var(--color-red);
    --color3: transparent;
    @include kui--crosshatch;
  }
  [data-tag='badge-circle'] {
    &.gray-background,
    &.kui--status-unknown {
      background: var(--color-base05);
      color: var(--color-base07);
    }
  }
}

.repl {
  &.sidecar-visible .kui--data-table-wrapper.kui--data-table-as-grid {
    flex: initial;
  }

  .kui--data-table-as-grid {
    .kui--card-header {
      border-bottom: 1px solid var(--color-base03);
    }
    .kui--card-body {
      padding-top: var(--pf-c-card--child--PaddingBottom);
    }

    .bx--data-table {
      display: grid;
      grid-column-gap: 3px;
      grid-row-gap: 3px;

      [data-tag='badge'] [data-tag='badge-circle'] {
        display: flex;
        margin: 0;
        width: $grid-cell-size;
        height: $grid-cell-size;
        border-radius: 0;

        transition-property: filter;
        transition-timing-function: var(--transition-timing-function);
        transition-duration: var(--transition-duration);
      }

      .kui--grid-cell-label {
        flex: 1;
        opacity: 0;
        display: flex;
        font-size: 0.6875em;
        align-items: center;
        justify-content: center;
        transition-property: opacity, mix-blend-mode;
      }

      &:hover {
        .kui--grid-cell-label {
          opacity: 0.6;
        }

        [data-tag='badge'] [data-tag='badge-circle'] {
          &:hover {
            filter: saturate(2) brightness(1.25);
            cursor: pointer;
            opacity: 1;

            .kui--grid-cell-label {
              mix-blend-mode: hard-light;
            }
          }
        }
      }
    }
  }
}

@mixin badge-only {
  .bx--data-table-container .bx--data-table,
  .kui--table-like {
    th[data-key='STATUS'],
    td.kui--status-cell {
      padding-left: 0;
    }
    [data-tag='badge'] {
      justify-content: center;

      [data-tag='badge-circle'] {
        margin: 0;
        width: 1em;
        height: 1em;
        border-radius: 0;
      }

      .kui--cell-inner-text {
        /* show only the badge-circle when the sidecar is open */
        display: none;
      }
    }
  }
}

/* fine-tune the STATUS/badge presentation of tables when the sidecar is open, or with narrower windows */
.repl.sidecar-visible {
  @include badge-only;
}
@include narrow-window {
  @include badge-only;

  .kui--hide-in-narrower-windows {
    display: none !important;
  }
}

[data-table-watching='true'] .bx--data-table {
  [data-tag='badge-circle'][data-just-updated] {
    &.yellow-background {
      animation: var(--animation-infinite-repeating-pulse);
    }

    &.red-background {
      animation: pulse 1000ms 6 alternate-reverse;
    }
  }
}
