@import '@angular/material';

// Content table mixin
// Use theme to manage colors on content table component
@mixin mic-content-table-override($theme) {
  $is-dark: map-get($theme, is-dark);
  $primary: map-get($theme, primary);
  $textColor: $dark-primary-text;

  @if $is-dark {
    $textColor: $light-primary-text;
  }

  .content-table {
    &.fixed {
      position: fixed;
    }

    ul {
      padding-inline: 10px;

      a {
        border: none;
        color: $textColor;

        &.active {
          .mat-icon,
          p {
            color: map-get($primary, A400);
            font-weight: bold;
            text-decoration: underline;
          }
        }

        &:hover:not(.active),
        &:focus:not(.active) {
          color: map-get($primary, A400);

          p {
            text-decoration: underline;
            text-underline-offset: 4px;
          }
        }
      }
    }
  }
}
