@import "./../styles/index.scss";

.header-profile-shortcut-container .menu-container.menu-arrow.arrow-top-right{
  &:before, &:after {
    right: 10px;
  }
}

#cptx-profiles-previews {
  width: 310px;
  user-select: none;

  ul.cptx-profile-preview-accounts{
    margin: 0;
    padding: 0;

    li.cptx-profile-preview-content{
      align-items: center;
      display: flex;
      padding: 15px 23px;
      width: calc(100% - 46px);

      .profile-plus-border-container {

        .profile-plus-outer-border {
          border-radius: 50%;
          position: absolute;
        }
    
        .profile-plus-inner-border {
          border-radius: 50%;
          background-image: linear-gradient(177deg, #ffcc83 3%, #c9821b 54%, #fecb81 94%);
          position: absolute;
        }
    
      }

      &.active{
        cursor: auto;

        .profile-plus-border-container {

          .profile-plus-outer-border {
            width: 56px;
            height: 56px;
            transform: translate(-3px, -50%);
          }
      
          .profile-plus-inner-border {
            width: 60px;
            height: 60px;
            transform: translate(-5px, -50%);
          }
      
        }

        .cptx-profile-preview-icon{
          height: 50px;
          width: 50px;
  
          span{
            font-size: 21px;
          }
        }

        .cptx-profile-preview-detail{

          .name-plus-container  {
            height: 19px;
          }

          .name{
            font-size: 14px;
            font-weight: 700;
          }

          .email-address{
            font-size: 13px;
          }
        }
      }
  
      &.logged{
        cursor: pointer;

        .profile-plus-border-container {

          .profile-plus-outer-border {
            width: 38px;
            height: 38px;
            transform: translate(-2px, -50%);
          }
      
          .profile-plus-inner-border {
            width: 40px;
            height: 40px;
            transform: translate(-3px, -50%);
          }
      
        }

        .cptx-profile-preview-icon{
          height: 34px;
          width: 34px;
  
          span{
            font-size: 15px;
          }
        }

        .cptx-profile-preview-detail{

          .name-plus-container  {
            height: 16px;
          }

          .name{
            font-size: 12px;
          }
          
          .email-address{
            color: #a3a6b3;
            font-size: 12px;
          }
        }

        &:hover {
          opacity: 0.8;
        }
      }

      &:nth-child(1) {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }

      .cptx-profile-preview-icon{
        align-items: center;
        background-color: rgba(141, 166, 210, 0.8);
        border-radius: 50%;
        display: inline-flex;
        z-index: 100;
  
        span{
          color: white;
          font-weight: 600;
        }
      }

      .cptx-profile-preview-detail{
        display: inline-flex;
        flex-direction: column;
        margin-left: 10px;
        vertical-align: top;
        width: calc(100% - 70px);

        .name-plus-container  {
          display: flex;
          align-items: center;

          .name {
            white-space: nowrap;
            flex-grow: 0;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .plus-badge {
            display: flex;
            align-items: center;
            color: white;
            height: 14px;
            width: 25px;
            font-size: 9px;
            margin-left: 5px;
            justify-content: center;
            flex-shrink: 0;
            border-radius: 4px;
          }
        }
    
        .email-address{
          margin-top: 2px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .cptx-profile-preview-badge{
        display: flex;
        .cptx-badge{
          background-color: #56C4FA;
          border-radius: 13px;
          color: white;
          font-size: 11px;
          font-weight: 500;
          height: 17px;
          line-height: 17px;
          margin: 0;
          min-width: 24px;
          padding: 0 2px;
          text-align: center;
          width: auto;
        }
      }
      
    }
  }

  .cptx-profile-preview-controls {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
    justify-content: center;

    .button-b{
      width: 45%;
      align-items: center;
      display: flex;
      font-weight: 600;
      height: 40px;
      justify-content: center;

      span{
        font-weight: 600;
      }

      &:nth-child(1) {
        i{
          font-size: 17px;
          font-weight: 800;
          margin-right: 0px;
        }
      }

      :nth-child(1) {
        padding-left: 10px;
      }
      :nth-child(2) {
        padding-right: 10px;
        padding-left: 4px;
      }
    }
  }
}

/*  THEME
----------------------------- */
@mixin themable($_THEME, $_BACKGROUND_COLOR_PROFILE_SHORTCUT_ACTIVE, $_BACKGROUND_COLOR_PROFILE_SHORTCUT_LOGGED, $_COLOR_TEXT_PRIMARY_PROFILE_SHORTCUT, $_COLOR_TEXT_SECONDARY_PROFILE_SHORTCUT, $_COLOR_TEXT_SECONDARY_ACTIVE_PROFILE_SHORTCUT, $_BORDER_COLOR_POPOVER){
  [data-theme^=#{$_THEME}],
  [data-theme] [data-theme^=#{$_THEME}] {
    #cptx-profiles-previews {
      .cptx-profile-preview-content {
        border-bottom: 1px solid $_BORDER_COLOR_POPOVER;

        &.active {
          background-color: $_BACKGROUND_COLOR_PROFILE_SHORTCUT_ACTIVE;

          .profile-plus-outer-border {
            background-color: $_BACKGROUND_COLOR_PROFILE_SHORTCUT_ACTIVE;
          }

          .cptx-profile-preview-detail{
            .email-address {
              color: $_COLOR_TEXT_SECONDARY_ACTIVE_PROFILE_SHORTCUT;
            }
          }
        }
        &.logged {
          background-color: $_BACKGROUND_COLOR_PROFILE_SHORTCUT_LOGGED;

          .profile-plus-outer-border {
            background-color: $_BACKGROUND_COLOR_PROFILE_SHORTCUT_LOGGED;
          }
        }

        .cptx-profile-preview-detail {
          > .name {
            color: $_COLOR_TEXT_PRIMARY_PROFILE_SHORTCUT;
          }
          > .email-address {
            color: $_COLOR_TEXT_SECONDARY_PROFILE_SHORTCUT;
          }
        }
      }

      .cptx-profile-preview-controls {
        background-color: $_BACKGROUND_COLOR_PROFILE_SHORTCUT_ACTIVE;
      }
    }
  }
}

@include themable($_THEME_LIGHT, $_BACKGROUND_COLOR_PROFILE_SHORTCUT_ACTIVE_LIGHT, $_BACKGROUND_COLOR_PROFILE_SHORTCUT_LOGGED_LIGHT, $_COLOR_TEXT_PRIMARY_PROFILE_SHORTCUT_LIGHT, $_COLOR_TEXT_SECONDARY_PROFILE_SHORTCUT_LIGHT, $_COLOR_TEXT_SECONDARY_ACTIVE_PROFILE_SHORTCUT_LIGHT, $_BORDER_COLOR_POPOVER_LIGHT);
@include themable($_THEME_DARK, $_BACKGROUND_COLOR_PROFILE_SHORTCUT_ACTIVE_DARK, $_BACKGROUND_COLOR_PROFILE_SHORTCUT_LOGGED_DARK, $_COLOR_TEXT_PRIMARY_PROFILE_SHORTCUT_DARK, $_COLOR_TEXT_SECONDARY_PROFILE_SHORTCUT_DARK, $_COLOR_TEXT_SECONDARY_ACTIVE_PROFILE_SHORTCUT_DARK, $_BORDER_COLOR_POPOVER_DARK);
