/* @component activity */

@include exports('md-activity') {
  .md-button.md-activity {
    fill: $md-white-100;
    margin: rem-calc(5);

    &__chat,
    .#{$dark-class} & {
      @include button-color(
        $color: $button__font-color--alt,
        $bg: $button--blue__background-color,
        $bg-hover: $button--blue__background-color--hover,
        $bg-active: $button--blue__background-color--active
      );

      .#{$contrast-class} & {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--blue__background-color--contrast,
          $bg-hover: $button--blue__background-color--hover--contrast,
          $bg-active: $button--blue__background-color--active--contrast
        );
      }
    }

    &__camera,
    .#{$dark-class} & {
      @include button-color(
        $color: $button__font-color--alt,
        $bg: $button--green__background-color,
        $bg-hover: $button--green__background-color--hover,
        $bg-active: $button--green__background-color--active
      );

      .#{$contrast-class} & {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--green__background-color--contrast,
          $bg-hover: $button--green__background-color--hover--contrast,
          $bg-active: $button--green__background-color--active--contrast
        );
      }
    }

    &__contact-card,
    .#{$dark-class} & {
      @include button-color(
        $color: $button__font-color--alt,
        $bg: $button--duck-egg__background-color,
        $bg-hover: $button--duck-egg__background-color--hover,
        $bg-active: $button--duck-egg__background-color--active
      );

      .#{$contrast-class} & {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--duck-egg__background-color,
          $bg-hover: $button--duck-egg__background-color--hover,
          $bg-active: $button--duck-egg__background-color--active
        );
      }
    }

    &__meetings,
    .#{$dark-class} & {
      @include button-color(
        $color: $button__font-color--alt,
        $bg: $button--orange__background-color,
        $bg-hover: $button--orange__background-color--hover,
        $bg-active: $button--orange__background-color--active
      );

      .#{$contrast-class} & {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--orange__background-color--contrast,
          $bg-hover: $button--orange__background-color--hover--contrast,
          $bg-active: $button--orange__background-color--active--contrast
        );
      }
    }

    &__whiteboard,
    .#{$dark-class} & {
      @include button-color(
        $color: $button__font-color--alt,
        $bg: $button--purple__background-color,
        $bg-hover: $button--purple__background-color--hover,
        $bg-active: $button--purple__background-color--active
      );

      .#{$contrast-class} & {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--purple__background-color--contrast,
          $bg-hover: $button--purple__background-color--hover--contrast,
          $bg-active: $button--purple__background-color--active--contrast
        );
      }
    }

    &__files,
    .#{$dark-class} & {
      @include button-color(
        $color: $button__font-color--alt,
        $bg: $button--yellow__background-color,
        $bg-hover: $button--yellow__background-color--hover,
        $bg-active: $button--yellow__background-color--active
      );

      .#{$contrast-class} & {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--yellow__background-color--contrast,
          $bg-hover: $button--yellow__background-color--hover--contrast,
          $bg-active: $button--yellow__background-color--active--contrast
        );
      }
    }

    &__share-screen,
    .#{$dark-class} & {
      @include button-color(
        $color: $button__font-color--alt,
        $bg: $button--cyan__background-color,
        $bg-hover: $button--cyan__background-color--hover,
        $bg-active: $button--cyan__background-color--active
      );

      .#{$contrast-class} & {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--cyan__background-color--contrast,
          $bg-hover: $button--cyan__background-color--hover--contrast,
          $bg-active: $button--cyan__background-color--active--contrast
        );
      }
    }

    &__tasks,
    .#{$dark-class} & {
      @include button-color(
        $color: $button__font-color--alt,
        $bg: $button--mint__background-color,
        $bg-hover: $button--mint__background-color--hover,
        $bg-active: $button--mint__background-color--active
      );

      .#{$contrast-class} & {
        @include button-color(
          $color: $button__font-color--alt,
          $bg: $button--mint__background-color--contrast,
          $bg-hover: $button--mint__background-color--hover--contrast,
          $bg-active: $button--mint__background-color--active--contrast
        );
      }
    }
  }
}