.chattigo-widget-list-options {
  border-top: solid 1px use-color('grey', light-i);
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 24px 0 16px;
  padding: 0;
  width: 100%;

  @include element('item') {
    @include use-font('body', 'regular');
    align-items: center;
    background-color: use-color(base, true-white);
    border-bottom: solid 1px use-color('grey', light-i);
    box-sizing: border-box;
    color: use-color('grey');
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    width: 100%;
  }

  @include element('left-side') {
    align-items: baseline;
    display: inline-flex;
    width: 60%;
  }
  
  @include element('right-side') {
    align-items: center;
    display: inline-flex;
  }
  
  @include element('label-time') {
    @include use-font('body', 'regular');
    color: use-color('grey', 'light');
  }

  @include element('switch') {
    margin-left: 16px;

    // switch override
    .c-switch + label {
      height: 30px !important;
      padding: 0 !important;
      width: 50px !important;

      &::after {
        height: 26px !important;
        left: 2px !important;
        top: 2px !important;
        width: 26px !important;
      }
    }

    .c-switch:checked + label::after {
      left: 90% !important;
      margin-left: -23px !important;
    }
  }

  // icon override
  [class^='icon-'],
  [class*=' icon-'] {
    color: use-color('grey', light) !important;
    font-size: 21px !important;
    padding-right: 8px !important;
    position: relative !important;
    top: 4px !important;
  }
}

.chattigo-widget-team {
  padding: 24px;
  text-align: left;

  @include element('label') {
    @include use-font('body', 'regular');
    color: use-color(base, 'black');
  }

  @include element('caption') {
    @include use-font('caption', 'regular');
    color: use-color('grey', light);
  }

  @include element('list') {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;

    @include modifier('item') {
      position: relative;
      // Note: calc for left position of team images
      @for $i from 1 through 6 {
        $left-value: ($i * 10) - 10;

        &:nth-child(#{$i}) {
          left: $left-value * -1px;
        }
      }

      @include media-breakpoint-up(phone-i) {
        &:nth-child(n+7) {
          display: none;
        }
      }
    }

    @include modifier('image') {
      border: solid 3px use-color(base, true-white);
      border-radius: 50%;
      height: 48px;
      width: 48px;

      @include media-breakpoint-up(phone-i) {
        height: 54px;
        width: 54px;
      }
    }
  }
}