libs/barista-components/expandable-section/src/expandable-section.scss
@import '../../style/font-mixins';
@import '../../core/src/style/variables';
@import '../../core/src/style/interactive-common';

:host {
  box-sizing: border-box;
  --dt-expandable-section-arrow-default-color: var(--dt-accent-default-color);
  --dt-expandable-section-arrow-hover-color: var(--dt-accent-hover-color);
  --dt-expandable-section-disabled-color: #{$gray-300};
  --dt-expandable-section-header-line-default-color: #{$gray-500};
}

:host-context(.dt-theme-dark) {
  --dt-expandable-section-header-dark-default-color: #{$gray-200};
  --dt-expandable-section-header-dark-hover-color: #{$white};
  --dt-expandable-section-header-line-dark-default-color: #{$gray-400};
  --dt-expandable-section-header-line-dark-hover-color: #{$gray-200};
  --dt-expandable-section-disabled-dark-color: #{$gray-500};

  &:not(.dt-expandable-section-disabled) {
    .dt-expandable-section-header-trigger:focus {
      @include dt-focus-style(true);
    }
  }

  .dt-expandable-section-header,
  .dt-expandable-section-header-trigger {
    color: var(--dt-expandable-section-header-dark-default-color);

    ~ .dt-expandable-section-header-line {
      border-bottom-color: var(
        --dt-expandable-section-header-line-dark-default-color
      );
    }
  }

  .dt-expandable-section-header-trigger:hover {
    color: var(--dt-expandable-section-header-dark-hover-color);

    ~ .dt-expandable-section-header-line {
      border-bottom-color: var(
        --dt-expandable-section-header-line-dark-hover-color
      );
    }
  }

  &.dt-expandable-section-disabled .dt-expandable-section-header,
  &.dt-expandable-section-disabled .dt-expandable-section-header-trigger {
    color: var(--dt-expandable-section-disabled-dark-color);

    .dt-expandable-section-arrow ::ng-deep svg {
      fill: var(--dt-expandable-section-disabled-dark-color);
    }

    ~ .dt-expandable-section-header-line {
      border-bottom-color: var(--dt-expandable-section-disabled-dark-color);
    }
  }
}

.dt-expandable-section-header {
  display: flex;
  align-items: baseline;

  position: relative;
  @include dt-label-font();

  .dt-expandable-section-arrow {
    width: 16px;
    height: 16px;
    margin-left: -2px;
    margin-top: -2px;
    fill: var(--dt-expandable-section-arrow-default-color);
    vertical-align: middle;
    transition: 0.125s;
  }
}

.dt-expandable-section-header-content {
  margin-left: 4px;
  padding-right: 2px;
}

:host:not(.dt-expandable-section-disabled)
  .dt-expandable-section-header-trigger:focus {
  @include dt-focus-style();
}

.dt-expandable-section-header-line {
  flex-grow: 1;
  border-bottom: 1px solid
    var(--dt-expandable-section-header-line-default-color);
}

.dt-expandable-section-header-trigger {
  @include dt-interactive-reset();
  @include dt-label-font();

  background-color: transparent;
  display: inline-flex;
  align-items: baseline;

  margin: 2px;
  padding: 0;
  position: relative;
}

.dt-expandable-section-header-trigger:hover {
  color: $gray-900;

  .dt-expandable-section-arrow ::ng-deep svg {
    fill: var(--dt-expandable-section-arrow-hover-color);
  }

  ~ .dt-expandable-section-header-line {
    border-bottom-color: var(--dt-neutral-hover-color);
  }
}

:host.dt-expandable-section-disabled {
  pointer-events: none;

  .dt-expandable-section-header,
  .dt-expandable-section-header-trigger {
    color: var(--dt-expandable-section-disabled-color);

    .dt-expandable-section-arrow ::ng-deep svg {
      fill: var(--dt-expandable-section-disabled-color);
    }
  }

  .dt-expandable-section-header-line {
    border-bottom: 1px solid var(--dt-expandable-section-disabled-color);
  }
}

/** The source order of opened and closed is important here
 * as both selectors have the same specificity, but when nesting
 * expandable sections, it is not possible to have a child expanded
 * that has a collapsed parent.
 */
:host.dt-expandable-section-opened
  .dt-expandable-section-header
  .dt-expandable-section-arrow {
  transform: rotate(0deg);
}

:host.dt-expandable-section-closed
  .dt-expandable-section-header
  .dt-expandable-section-arrow {
  transform: rotate(-90deg);
}

.dt-expandable-section-container {
  margin-left: 16px;
  padding-left: 4px;
  margin-top: 12px;
}
