libs/barista-components/table/src/expandable/expandable-row.scss
@import '../../../core/src/style/variables';
@import '../../../core/src/style/table';
@import '../table-mixins';

:host {
  --dt-expandable-row-border-color: #{$turquoise-500};
  --dt-expandable-row-background-color: #{$turquoise-100};
}
:host-context(.dt-theme-turquoise) {
  --dt-expandable-row-border-color: #{$turquoise-500};
  --dt-expandable-row-background-color: #{$turquoise-100};
}
:host-context(.dt-theme-blue) {
  --dt-expandable-row-border-color: #{$blue-500};
  --dt-expandable-row-background-color: #{$blue-100};
}
:host-context(.dt-theme-purple) {
  --dt-expandable-row-border-color: #{$purple-500};
  --dt-expandable-row-background-color: #{$purple-100};
}
:host-context(.dt-theme-royalblue) {
  --dt-expandable-row-border-color: #{$royalblue-500};
  --dt-expandable-row-background-color: #{$royalblue-100};
}

:host {
  > .dt-expandable-row-base-expanded {
    border-top-color: var(--dt-expandable-row-border-color);
    background-color: var(--dt-expandable-row-background-color);
  }
  .dt-expandable-row-expandable-expanded {
    border-bottom-color: var(--dt-expandable-row-border-color);
  }
}

:host.dt-table-row-indicator.dt-color-warning
  > .dt-expandable-row-base::before {
  background-color: var(--dt-warning-default-color);
}

:host.dt-table-row-indicator.dt-color-error > .dt-expandable-row-base::before {
  background-color: var(--dt-error-default-color);
}

:host.dt-table-row-indicator.dt-color-recovered
  > .dt-expandable-row-base::before {
  background-color: var(--dt-recovered-default-color);
}

:host.dt-table-row-indicator.dt-color-critical
  > .dt-expandable-row-base::before {
  background-color: var(--dt-critical-default-color);
}

:host.dt-expandable-row {
  &:nth-child(even) {
    background-color: #ffffff;
  }

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

.dt-expandable-row-base {
  position: relative;
  min-height: $dt-table-row-height;
  @include dt-base-row();

  border: 2px solid transparent;
}

.dt-expandable-row-base-collapsed:hover {
  border: 1px solid $gray-500;
  padding: 1px;
}

.dt-expandable-row-base + .dt-expandable-row-collapsible {
  overflow: hidden;
}

.dt-expandable-row-base-expanded {
  border-top: 2px solid $gray-700;
  border-bottom: hidden;
  border-left: hidden;
  border-right: hidden;
  padding: 0 2px;
  background-color: $gray-200;
}

/*
 * Hide the collapsible section completely to prevent flashing,
 * while the table redraws certain columns.
 */
.dt-expandable-row-base-collapsed + .dt-expandable-row-collapsible {
  display: none;
}

.dt-expandable-row-expandable {
  background-color: #ffffff;
  padding: 16px 12px 16px 14px;
}

.dt-expandable-row-expandable-expanded {
  border-bottom: 2px solid $gray-700;
}

:host.dt-expandable-row-initial {
  .dt-expandable-row-collapsible {
    height: 0;
    min-height: 0;
    visibility: hidden;
  }
}

:host.dt-table-row-indicator > {
  .dt-expandable-row-base::before {
    @include dt-table-row-indicator();
  }

  .dt-expandable-row-base-collapsed:hover::before {
    height: calc(100% - 6px);
    left: 3px;
  }

  .dt-expandable-row-base-expanded::before {
    height: calc(100% - 4px);
    left: 4px;
  }
}
