@use '@angular/material' as mat;
@use 'sass:map';
@use '../../colors' as colors;

// Carousel mixin
// Use theme to manage colors on carousel component
@mixin mic-carousel-override($theme) {
  $primary: map.get($theme, primary);
  $is-dark: map.get($theme, is-dark);
  mic-carousel {
    .mic-carousel {
      .description {
        color: colors.$mic-text-colors-normal-light;
        background-color: map.get(colors.$mic-grey, 500);
      }
    }

    .button-left:hover,
    .button-right:hover {
      @if $is-dark {
        background-color: map.get($primary, 50);
      } @else {
        background-color: map.get($primary, A700);
      }
    }

    .button-left:focus,
    .button-right:focus {
      border: white solid 2px;
    }
  }
}
