@use '@angular/material' as mat;
@use 'sass:map';
// Timeline mixin
// Use theme to manage colors on Timeline component
@mixin mic-timeline-override($theme) {
  $primary: map.get($theme, primary);
  $accent: map.get($theme, accent);
  $background: map.get($theme, background);

  .timeline-line {
    background-color: map.get($background, sub-menu);
  }

  .timeline-horizontal-list .timeline-list::before {
    background-color: map.get($background, sub-menu);
  }

  mic-timeline-entry-dot {
    @include mat.elevation(2);
    background-color: map.get($primary, A400);

    &.accent {
      background-color: map.get($accent, A400);
    }
  }

  .timeline-entry-card:focus {
    outline: map.get($primary, A400) solid 2px;
  }

  .timeline-entry-card,
  .timeline-horizontal-list .mic-timeline-entry-content {
    background-color: map.get($background, card);
  }
}
