/**
* @name Alerts
* @description Alerts to show Success/Error Messages.
* @category communication
* @component alert
*/

@import '../settings/alerts';
@import '../settings/close';
@import '../settings/colors';
@import '../settings/core';
@import '../settings/fonts';
@import '../settings/list-item';
@import '../tools/mixins/flex';
@import '../tools/mixins/border-radius';
@import '../tools/mixins/spacing-responsive';
@import '../tools/mixins/vendor-prefixes';
@import 'node_modules/@collabui/icons/scss/collab-ui-icons';

@include exports('cui-alert') {
  .#{$alert__class}__container {
    position: fixed;
    z-index: 9999;

    &--top-left {
      top: 1em;
      left: 1em;
    }

    &--top-center {
      top: 1em;
      left: 50%;
      transform: translate(-50%);
    }

    &--top-right {
      top: 1em;
      right: 1em;
    }

    &--bottom-left {
      bottom: 1em;
      left: 1em;
    }

    &--bottom-center {
      bottom: 1em;
      left: 50%;
      transform: translate(-50%);
    }

    &--bottom-right {
      right: 1em;
      bottom: 1em;
    }

    &--call {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      @include flex;
    }
  }

  .#{$alert__class} {
    @include flex($jc: space-between, $ac: space-between);
    @include border-radius($alert__border-radius);

    width: $alert__width;
    max-height: rem-calc(308);
    min-height: rem-calc(78);
    padding: $alert__padding $alert__padding-right $alert__padding
      $alert__padding-left;
    margin-bottom: rem-calc(8);
    background-color: $white;
    border: 1px solid $black-12;
    box-shadow: 0 8px 16px 0 $black-08;

    &__icon {
      font-family: $icon-font-name;
      font-size: $alert__icon-font-size;
      line-height: 0;

      &:before {
        color: $alert__font-color--info;

        @include icon-info_24;
      }
    }

    &__content {
      display: flex;
      flex-direction: column;
      flex-grow: 2;
      flex-basis: 0%;
      padding-right: rem-calc(2);
      padding-left: rem-calc(16);
    }

    &__title {
      font-size: $alert__font-size--title;
      line-height: rem-calc(24);
      color: $alert__font-color--info;
    }

    &__status,
    &__message {
      font-family: $brand-font-light;
      font-size: $alert__font-size;
      line-height: rem-calc(18);
    }

    &__status {
      color: $alert__font-color--status;
    }

    &__message {
      color: $alert__font-color;
    }

    &__title,
    &__message {
      max-width: 10rem;
      word-wrap: break-word;
    }

    &__button {
      margin-left: rem-calc(8);
    }

    &.#{$alert__class}--success {
      .#{$alert__class}__icon {
        &:before {
          color: $alert__font-color--success;

          @include icon-check-circle_24;
        }
      }

      .#{$alert__class}__title {
        color: $alert__font-color--success;
      }
    }

    &.#{$alert__class}--warning {
      .#{$alert__class}__icon {
        &:before {
          color: $alert__font-color--warning;

          @include icon-warning_24;
        }
      }

      .#{$alert__class}__title {
        color: $alert__font-color--warning;
      }
    }

    &.#{$alert__class}--error {
      .#{$alert__class}__icon {
        &:before {
          color: $alert__font-color--error;

          @include icon-clear_24;
        }
      }

      .#{$alert__class}__title {
        color: $alert__font-color--error;
      }
    }

    &.#{$alert__class}--meeting {
      .#{$alert__class}__content {
        max-width: 10rem;
      }

      .#{$alert__class}__content--wide {
        max-width: 13rem;
      }

      .#{$alert__class}__title,
      .#{$alert__class}__message {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .#{$alert__class}__title {
        color: $alert__font-color--title;
      }
    }

    &.#{$alert__class}--call {
      @include flex($fd: column);

      width: rem-calc(278);
      max-height: rem-calc(500);
      min-height: rem-calc(282);
      padding: $alert__padding-top--call $alert__padding--call
        $alert__padding-bottom--call $alert__padding--call;
      margin-right: rem-calc(15);

      .#{$alert__class}__title {
        padding-bottom: rem-calc(24);
        font-size: rem-calc(14);
        font-weight: bold;
        line-height: rem-calc(22);
        color: $alert__font-color--title;
      }

      .#{$alert__class}__caller {
        @include flex($fd: column);

        &-title {
          padding-top: rem-calc(8);
          font-size: rem-calc(16);
          font-weight: bold;
          line-height: rem-calc(24);
        }

        &-subtitle {
          font-size: rem-calc(14);
          line-height: rem-calc(22);
        }
      }

      .#{$alert__class}--call--buttons {
        padding-top: rem-calc(24);

        .#{$icon__class} {
          fill: $white;
        }
      }

      .#{$list__class} {
        padding-top: rem-calc(12);

        .#{$list-item__class} {
          background-color: $black-04;

          &:hover {
            background-color: $black-04;
          }

          &:last-child {
            @include border-bottom-radius(8px);
          }

          &-header {
            border-bottom: 1px solid $black-08;

            @include border-top-radius(8px);
          }
        }
      }
    }
  }
}

/**
* @component alert
* @section default
*
* @html
  <div class="cui-alert">
    <div class="cui-alert__icon"></div>
    <div class="cui-alert__content">
      <div class="cui-alert__title">Title goes here</div>
      <div class="cui-alert__message">
        Info text here. Lorem ipsum dolor sit amet, consectetur.
      </div>
    </div>
    <div class="cui-alert__button">
      <button type="button" class="cui-button cui-button--circle cui-button--large">
        <span class="cui-button__children icon icon-cancel_14"></span>
      </button>
    </div>
  </div>
*/

/**
* @component alert
* @section success
*
* @html
  <div class="cui-alert cui-alert--success">
    <div class="cui-alert__icon"></div>
    <div class="cui-alert__content">
      <div class="cui-alert__title">Title goes here</div>
      <div class="cui-alert__message">
        Success text here. Lorem ipsum dolor sit amet, consectetur.
      </div>
    </div>
    <div class="cui-alert__button">
      <button type="button" class="cui-button cui-button--circle cui-button--large">
        <span class="cui-button__children icon icon-cancel_14"></span>
      </button>
    </div>
  </div>
*/

/**
* @component alert
* @section warning
*
* @html
  <div class="cui-alert cui-alert--warning">
    <div class="cui-alert__icon"></div>
    <div class="cui-alert__content">
      <div class="cui-alert__title">Title goes here</div>
      <div class="cui-alert__message">
        Warning text here. Lorem ipsum dolor sit amet, consectetur.
      </div>
    </div>
    <div class="cui-alert__button">
      <button type="button" class="cui-button cui-button--circle cui-button--large">
        <span class="cui-button__children icon icon-cancel_14"></span>
      </button>
    </div>
  </div>
*/

/**
* @component alert
* @section error
*
* @html
  <div class="cui-alert cui-alert--error">
    <div class="cui-alert__icon"></div>
    <div class="cui-alert__content">
      <div class="cui-alert__title">Title goes here</div>
      <div class="cui-alert__message">
        Error text here. Lorem ipsum dolor sit amet, consectetur.
      </div>
    </div>
    <div class="cui-alert__button">
      <button type="button" class="cui-button cui-button--circle cui-button--large">
        <span class="cui-button__children icon icon-cancel_14"></span>
      </button>
    </div>
  </div>
*/

/**
* @component alert-meeting
* @section default
* @html
  <div class="cui-alert cui-alert--meeting">
    <div class="cui-avatar cui-avatar--medium">
      <div class="cui-avatar cui-avatar--medium" title="J $">
        <span class="cui-avatar__letter">J$</span>
      </div>
    </div>
    <div class="cui-alert__content">
      <div class="cui-alert__title" title="Important Meeting">Important Meeting</div>
      <div class="cui-alert__status">In 5 mins.</div>
      <div class="cui-alert__message" title="This is important">This is important</div>
    </div>
    <div class="cui-alert__button">
      <button
        class="cui-button cui-button--circle cui-button--44"
        alt="snooze" type="button" aria-label="snooze">
        <span class="cui-button__children">
          <i class="icon icon-alarm_16"></i>
        </span>
      </button>
    </div>
    <div class="cui-alert__button">
      <button
        class="cui-button cui-button--circle cui-button--44"
        alt="close" type="button" aria-label="close">
        <span class="cui-button__children">
          <i class="icon icon-cancel_16"></i>
        </span>
      </button>
    </div>
  </div>
*/

/**
* @component alert-meeting
* @section multiple
* @html
  <div class="cui-alert cui-alert--meeting">
    <div class="cui-avatar cui-avatar--medium">
      <div class="cui-avatar cui-avatar--medium" title="J $">
        <span class="cui-avatar__letter">J$</span>
      </div>
    </div>
    <div class="cui-alert__content">
      <div class="cui-alert__title" title="Important Meeting">Important Meeting</div>
      <div class="cui-alert__status">In 5 mins.</div>
      <div class="cui-alert__message" title="This is important">This is important</div>
    </div>
    <div class="cui-alert__button">
      <button
        class="cui-button cui-button--circle cui-button--44"
        alt="snooze" type="button" aria-label="snooze">
        <span class="cui-button__children">
          <i class="icon icon-alarm_16"></i>
        </span>
      </button>
    </div>
    <div class="cui-alert__button">
      <button
        class="cui-button cui-button--circle cui-button--44"
        alt="close" type="button" aria-label="close">
        <span class="cui-button__children">
          <i class="icon icon-cancel_16"></i>
        </span>
      </button>
    </div>
  </div>
*/

/**
* @component alert-call
* @section default
* @html
  <div class="cui-alert cui-alert--call">
    <div class="cui-alert__title">Incoming Call</div>
    <div class="cui-alert__caller">
      <div class="cui-avatar cui-avatar--xlarge" title="Jefe Guadelupe">
        <span class="cui-avatar__letter">JG</span>
      </div>
      <div class="cui-alert__caller-title">Jefe Guadelupe</div>
      <div class="cui-alert__caller-subtitle">+ 1 972-555-1212</div>
    </div>
    <div class="cui-alert--call--buttons">
      <button
        class="cui-button cui-button--circle cui-button--44 cui-button--green"
        alt="answer call with voice and video"
        type="button"
        aria-label="answer call with voice and video" t
        abindex="0">
        <span class="cui-button__children">
          <i class="icon icon-camera_24"></i>
        </span>
      </button>
      <button
        class="cui-button cui-button--circle cui-button--44 cui-button--green"
        alt="answer call with voice only"
        type="button"
        aria-label="answer call with voice only"
        tabindex="0">
        <span class="cui-button__children">
          <i class="icon icon-handset_24"></i>
        </span>
      </button>
      <button class="cui-button cui-button--circle cui-button--44 cui-button--red" alt="reject call" type="button" aria-label="reject call" tabindex="0">
        <span class="cui-button__children">
          <i class="icon icon-cancel_24"></i>
        </span>
      </button>
    </div>
  </div>
*/

/**
* @component alert-call
* @section device
* @html
  <div class="cui-alert cui-alert--call">
    <div class="cui-alert__title">Incoming Call</div>
    <div class="cui-alert__caller">
      <div class="cui-avatar cui-avatar--xlarge">
        <span class="cui-avatar__icon">
          <i class="icon icon-spark-board_32"></i>
        </span>
      </div>
      <div class="cui-alert__caller-title">SJC21-Babelfish</div>
      <div class="cui-alert__caller-subtitle">+ 1 408-555-1212</div>
    </div>
    <div class="cui-alert--call--buttons">
      <button
        class="cui-button cui-button--circle cui-button--44 cui-button--green"
        alt="answer call with voice and video"
        type="button"
        aria-label="answer call with voice and video"
        tabindex="0">
        <span class="cui-button__children">
          <i class="icon icon-camera_24"></i>
        </span>
      </button>
      <button
        class="cui-button cui-button--circle cui-button--44 cui-button--green"
        alt="answer call with voice only"
        type="button"
        aria-label="answer call with voice only"
        tabindex="0">
        <span class="cui-button__children">
          <i class="icon icon-handset_24"></i>
        </span>
      </button>
      <button
        class="cui-button cui-button--circle cui-button--44 cui-button--red"
        alt="reject call"
        type="button"
        aria-label="reject call"
        tabindex="0">
        <span class="cui-button__children">
          <i class="icon icon-cancel_24"></i>
        </span>
      </button>
    </div>
  </div>
*/

/**
* @component alert-call
* @section number
* @html
  <div class="cui-alert cui-alert--call">
    <div class="cui-alert__title">Incoming Call</div>
    <div class="cui-alert__caller">
      <div class="cui-avatar cui-avatar--xlarge" title="#">
        <span class="cui-avatar__letter">#</span>
      </div>
      <div class="cui-alert__caller-title">+ 1 408-555-1212</div>
      <div class="cui-alert__caller-subtitle"></div>
    </div>
    <div class="cui-alert--call--buttons">
      <button
        class="cui-button cui-button--circle cui-button--44 cui-button--green"
        alt="answer call with voice and video"
        type="button"
        aria-label="answer call with voice and video"
        tabindex="0">
        <span class="cui-button__children">
          <i class="icon icon-camera_24"></i>
        </span>
      </button>
      <button
        class="cui-button cui-button--circle cui-button--44 cui-button--green"
        alt="answer call with voice only"
        type="button"
        aria-label="answer call with voice only"
        tabindex="0">
        <span class="cui-button__children">
          <i class="icon icon-handset_24"></i>
        </span>
      </button>
      <button
        class="cui-button cui-button--circle cui-button--44 cui-button--red"
        alt="reject call"
        type="button"
        aria-label="reject call"
        tabindex="0">
        <span class="cui-button__children">
          <i class="icon icon-cancel_24"></i>
        </span>
      </button>
    </div>
  </div>
*/

/**
* @component alert-call
* @section device-list
* @html
  <div class="cui-alert cui-alert--call">
    <div class="cui-alert__title">Incoming Call</div>
    <div class="cui-alert__caller">
      <div class="cui-avatar cui-avatar--xlarge" title="Jefe Guadelupe">
        <span class="cui-avatar__letter">JG</span>
      </div>
      <div class="cui-alert__caller-title">Jefe Guadelupe</div>
      <div class="cui-alert__caller-subtitle">+ 1 972-555-1212</div>
    </div>
    <div class="cui-list cui-list--vertical cui-list" role="list">
      <div
        aria-current="false"
        class="cui-list-item cui-list-item--read-only cui-list-item-header"
        id="cui-list-item-42"
        role="listItem"
        title="Device selection">
        <div class="cui-list-item__center">
          <div class="cui-list-item__header">Device selection</div>
        </div>
        <div class="cui-list-item__right"></div>
      </div>
      <div
        aria-current="true"
        class="cui-list-item"
        id="cui-list-40__list-item"
        role="listItem" title="SJC21-Babelfish">
        <div class="cui-list-item__left">
          <i class="icon icon-spark-board_20"></i>
        </div>
        <div class="cui-list-item__center">
          <div class="cui-list-item__header">SJC21-Babelfish</div>
        </div>
        <div class="cui-list-item__right">
          <i class="icon icon-check_20 cui-color--blue-base"></i>
        </div>
      </div>
      <div
        aria-current="false"
        class="cui-list-item"
        id="cui-list-40__list-item"
        role="listItem"
        title="Use my computer">
        <div class="cui-list-item__left">
          <i class="icon icon-laptop_20"></i>
        </div>
        <div class="cui-list-item__center">
          <div class="cui-list-item__header">Use my computer</div>
        </div>
        <div class="cui-list-item__right"></div>
      </div>
    </div>
    <div class="cui-alert--call--buttons">
      <button
        class="cui-button cui-button--circle cui-button--44 cui-button--green"
        alt="answer call with voice and video"
        type="button"
        aria-label="answer call with voice and video">
        <span class="cui-button__children">
          <i class="icon icon-camera_24"></i>
        </span>
      </button>
      <button
        class="cui-button cui-button--circle cui-button--44 cui-button--green"
        alt="answer call with voice only"
        type="button"
        aria-label="answer call with voice only">
        <span class="cui-button__children">
          <i class="icon icon-handset_24"></i>
        </span>
      </button>
      <button
        class="cui-button cui-button--circle cui-button--44 cui-button--red"
        alt="reject call"
        type="button"
        aria-label="reject call">
        <span class="cui-button__children">
          <i class="icon icon-cancel_24"></i>
        </span>
      </button>
    </div>
  </div>
*/