/*
* @category controls
* @component activity
* @design collaboration-design
*/

@import '../settings/buttons';
@import '../tools/mixins/buttons';
@include exports('cui-activity') {
  .cui-button.cui-activity {
    fill: $white;
    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
        );
      }
    }
    &__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
        );
      }
    }
  }
}

/**
* @component activity-button
* @section default
* @html
  <div class="cui-button__container--small">
    <button
      class="cui-button cui-button--circle cui-button--68 cui-activity cui-activity__chat"
      alt="Chat" type="button" aria-label="Chat">
      <span class="cui-button__children">
        <i class="icon icon-chat_28"></i>
      </span>
    </button>
    <div class="cui-button__label">Chat</div>
  </div>
  <div class="cui-button__container--small">
    <button
      class="cui-button cui-button--circle cui-button--68 cui-activity cui-activity__camera"
      alt="camera" type="button" aria-label="camera">
      <span class="cui-button__children">
        <i class="icon icon-camera_28"></i>
      </span>
    </button>
    <div class="cui-button__label">Camera</div>
  </div>
  <div class="cui-button__container--small">
    <button
      class="cui-button cui-button--circle cui-button--68 cui-activity cui-activity__meetings"
      alt="meetings" type="button" aria-label="meetings">
      <span class="cui-button__children">
        <i class="icon icon-meetings_28"></i>
      </span>
    </button>
    <div class="cui-button__label">Meetings</div>
  </div>
  <div class="cui-button__container--small">
    <button
      class="cui-button cui-button--circle cui-button--68 cui-activity cui-activity__whiteboard"
      alt="whiteboard" type="button" aria-label="whiteboard">
      <span class="cui-button__children">
        <i class="icon icon-whiteboard_28"></i>
      </span>
    </button>
    <div class="cui-button__label">Whiteboard</div>
  </div>
  <div class="cui-button__container--small">
    <button
      class="cui-button cui-button--circle cui-button--68 cui-activity cui-activity__files"
      alt="files" type="button" aria-label="files">
      <span class="cui-button__children">
        <i class="icon icon-files_28"></i>
      </span>
    </button>
    <div class="cui-button__label">Files</div>
  </div>
  <div class="cui-button__container--small">
    <button
      class="cui-button cui-button--circle cui-button--68 cui-activity cui-activity__share-screen"
      alt="share-screen" type="button" aria-label="share-screen">
      <span class="cui-button__children">
        <i class="icon icon-share-screen_28"></i>
      </span>
    </button>
    <div class="cui-button__label">Share</div>
  </div>
  <div class="cui-button__container--small">
    <button
      class="cui-button cui-button--circle cui-button--68 cui-activity cui-activity__tasks"
      alt="tasks" type="button" aria-label="tasks">
      <span class="cui-button__children">
        <i class="icon icon-tasks_28"></i>
      </span>
    </button>
    <div class="cui-button__label">Tasks</div>
  </div>
*/

/**
* @component activity-button
* @section large
* @html
  <div class="cui-button__container">
    <button
      class="cui-button cui-button--circle cui-button--84 cui-activity cui-activity__chat"
      alt="Chat" type="button" aria-label="Chat">
      <span class="cui-button__children">
        <i class="icon icon-chat_36"></i>
      </span>
    </button>
    <div class="cui-button__label">Chat</div>
  </div>
  <div class="cui-button__container">
    <button
      class="cui-button cui-button--circle cui-button--84 cui-activity cui-activity__camera"
      alt="Camera" type="button" aria-label="Camera">
      <span class="cui-button__children">
        <i class="icon icon-camera_36"></i>
      </span>
    </button>
    <div class="cui-button__label">Camera</div>
  </div>
  <div class="cui-button__container">
    <button
      class="cui-button cui-button--circle cui-button--84 cui-activity cui-activity__meetings"
      alt="Meetings" type="button" aria-label="Meetings">
      <span class="cui-button__children">
        <i class="icon icon-meetings_36"></i>
      </span>
    </button>
    <div class="cui-button__label">Meetings</div>
  </div>
  <div class="cui-button__container">
    <button
      class="cui-button cui-button--circle cui-button--84 cui-activity cui-activity__whiteboard"
      alt="Whiteboard" type="button" aria-label="Whiteboard">
      <span class="cui-button__children">
        <i class="icon icon-whiteboard_36"></i>
      </span>
    </button>
    <div class="cui-button__label">Whiteboard</div>
  </div>
  <div class="cui-button__container">
    <button
      class="cui-button cui-button--circle cui-button--84 cui-activity cui-activity__files"
      alt="Files" type="button" aria-label="Files">
      <span class="cui-button__children">
        <i class="icon icon-files_36"></i>
      </span>
    </button>
    <div class="cui-button__label">Files</div>
  </div>
  <div class="cui-button__container">
    <button
      class="cui-button cui-button--circle cui-button--84 cui-activity cui-activity__share-screen"
      alt="Share" type="button" aria-label="Share">
      <span class="cui-button__children">
        <i class="icon icon-share-screen_36"></i>
      </span>
    </button>
    <div class="cui-button__label">Share</div>
  </div>
  <div class="cui-button__container">
    <button
      class="cui-button cui-button--circle cui-button--84 cui-activity cui-activity__tasks"
      alt="Tasks" type="button" aria-label="Tasks" title="tasks">
      <span class="cui-button__children">
        <i class="icon icon-tasks_36"></i>
      </span>
    </button>
    <div class="cui-button__label">Tasks</div>
  </div>
*/