@import '~@kaizen/design-tokens/sass/shadow';
@import '~@kaizen/design-tokens/sass/border';
@import '~@kaizen/design-tokens/sass/animation';
@import '~@kaizen/design-tokens/sass/spacing';
@import '~@kaizen/design-tokens/sass/color';

@layer kz-components {
  // Taken from design-tokens/sass/shadow
  // we need control of the x and y offset in this component
  $box-shadow-color-sm: rgb(53, 55, 74, 0.09);
  $row-height: 60px;
  $row-height-data-variant: 48px;

  @mixin anchor-reset {
    text-decoration: none;
    color: $color-purple-800;
    display: block;
  }

  @mixin anchor-reset-pseudo-states {
    &:hover,
    &:active,
    &:focus {
      text-decoration: none;
    }
  }

  // Special Table-only button reset
  @mixin button-reset {
    appearance: none;
    background: transparent;
    border: none;
    font: inherit;
    margin: 0;
    padding: 0;
    transition: none; // override Murmur global styles :(
    outline: none;
  }

  .container {
    width: 100%;
    margin-bottom: $spacing-sm;
  }

  .headerRowCell {
    display: flex;
    align-items: stretch;
    text-align: start;
    justify-content: flex-start;
    // The 8px usually makes the height of the header cell 40px
    padding: 8px $spacing-md;
    // This is required as so the tooltip will display directly above the header cell
    position: relative;
  }

  .headerRowCellNoWrap {
    .headerRowCellLabel {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .headerRowCellAlignCenter {
    justify-content: center;
    text-align: center;
  }

  .headerRowCellAlignEnd {
    justify-content: flex-end;
    text-align: end;
  }

  .headerRowCellCheckbox {
    margin-inline-end: 10px;
  }

  // The .headerRowCell wrapper is required to increase the specificity, as so
  // we can override the `Tooltip` component's styling.
  .headerRowCell .headerRowCellTooltip {
    display: flex;
    align-items: stretch;
    max-width: 100%;
  }

  .headerRowCell.headerRowCellNoWrap .headerRowCellContent {
    max-width: 100%;
  }

  .headerRowCellButton {
    @include button-reset;
    @include anchor-reset;

    display: flex;
    align-items: stretch;
    width: 100%;
    // Ensures that the 100% doesn't go outside of the `headerRowCell` width
    box-sizing: border-box;

    @include anchor-reset-pseudo-states;

    &:focus-visible {
      outline: none;
      position: relative;

      &::after {
        // This offset provide enough gap on reverse for contrast ratios
        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% + #{$focus-ring-offset});
        height: calc(100% + #{$focus-ring-offset});
        content: '';
        position: absolute;
        background: transparent;
        border-color: $color-blue-500;
        border-width: $border-focus-ring-border-width;
        border-style: $border-focus-ring-border-style;
        border-radius: $border-focus-ring-border-radius;
      }
    }
  }

  .headerRowCellButtonReversed {
    color: $color-white;

    &:focus-visible::after {
      border-color: $color-blue-100;
    }
  }

  .headerRowCellNoButton {
    display: flex;
    align-items: stretch;
    width: 100%;
    // Ensures that the 100% doesn't go outside of the `headerRowCell` width
    box-sizing: border-box;
  }

  .headerRowCellLabelAndIcons {
    display: flex;
    align-items: center;
    flex: 1 1 100%;
    width: 100%;
  }

  .headerRowCellTooltipIcon {
    color: $color-blue-500;
    margin-inline-end: $spacing-xs;
  }

  .headerRowCellIcon {
    color: rgb($color-purple-800-rgb, 0.7);
    height: 20px;

    .headerRowCellActive & {
      color: $color-purple-800;
    }

    .headerRowCellButtonReversed & {
      color: $color-white;
    }
  }

  .card {
    @include button-reset;
    // These css properties are required for when the rows are anchor elements
    @include anchor-reset;

    // This is an optical hack to stop the card shadow from overlapping over
    // the proceeding cards
    box-shadow: 0 4px 6px rgb(53, 55, 74, 0.04);
    border: solid 1px rgb($color-purple-700-rgb, 0.1);
    transition:
      box-shadow $animation-duration-rapid,
      border-color $animation-duration-rapid,
      margin $animation-duration-rapid,
      padding $animation-duration-rapid,
      width $animation-duration-rapid;
    background: $color-white;

    @include anchor-reset-pseudo-states;

    &:not(:first-child) {
      margin-top: -1px;
    }

    &:last-child {
      border-bottom-left-radius: $border-solid-border-radius;
      border-bottom-right-radius: $border-solid-border-radius;
    }

    &:hover {
      will-change: box-shadow, border-color, margin, padding, width;
    }

    &:focus-visible {
      outline: none;
      position: relative;

      &::after {
        // This offset provide enough gap on on reverse for contrast ratios
        $focus-ring-offset: calc(#{$border-focus-ring-border-width} + 2px);

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: calc(100% + #{$focus-ring-offset});
        height: calc(100% + #{$focus-ring-offset});
        content: '';
        position: absolute;
        background: transparent;
        border-color: $color-blue-500;
        border-width: $border-focus-ring-border-width;
        border-style: $border-focus-ring-border-style;
        border-radius: inherit;
      }
    }

    &.well {
      margin-top: $spacing-sm;
    }
  }

  // target the first child card when there is a heading present
  [role='rowgroup'] + .card {
    border-top-left-radius: $border-solid-border-radius;
    border-top-right-radius: $border-solid-border-radius;
    box-shadow: $shadow-small-box-shadow;
  }

  .card:first-child {
    border-top-left-radius: $border-solid-border-radius;
    border-top-right-radius: $border-solid-border-radius;
    box-shadow: $shadow-small-box-shadow;
  }

  .row {
    display: flex;
  }

  .well {
    border-color: $border-borderless-border-color;
    box-shadow: none;
    border-radius: $border-solid-border-radius;
    background-color: $color-gray-300;
    margin-bottom: $spacing-sm;
  }

  .popout {
    box-shadow: $shadow-large-box-shadow;
  }

  .expanded {
    position: relative;
    z-index: 1;
    margin-left: calc(#{$spacing-sm} * -1);
    margin-right: calc(#{$spacing-sm} * -1);
    padding-left: $spacing-sm;
    padding-right: $spacing-sm;
  }

  .hasHoverState {
    width: 100%;
    text-align: left;
    cursor: pointer;

    &.expanded {
      width: calc(100% + #{$spacing-md});
    }

    &:focus,
    &:hover {
      background-color: $color-gray-100;
    }
  }

  .rowCell {
    // These css properties are required for when the cells are anchor elements
    @include anchor-reset;

    min-height: $row-height;
    padding: 0 $spacing-md;
    display: flex;
    align-items: center;

    .defaultSpacing & {
      padding: $spacing-sm $spacing-md;
    }

    .dataVariant & {
      min-height: $row-height-data-variant;
    }
  }

  .rowCellAlignCenter {
    justify-content: center;
    text-align: center;
  }

  .rowCellAlignEnd {
    justify-content: flex-end;
    text-align: right;
  }

  .whiteText {
    color: $color-white;
  }
}