@import "../../../scss/variables";

connect-social-accounts-panel {
  display: block;

  .social-login-row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid $acc-page-border-color;

    &.last {
      border-bottom: none;
      margin-bottom: 0;
    }

    > .icon-container {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
      border-radius: 3px;

      &.facebook {
        color: $facebook-color;
        background-color: $facebook-color;

        .mat-icon {
          background-color: $site-bg-color-100;
        }
      }

      &.twitter {
        background-color: $twitter-color;
        color: $site-bg-color-100;
      }

      &.google {
        background-color: $google-color;
        color: $site-bg-color-100;
      }
    }

    > .name {
      display: inline-block;
      margin-left: 15px;
      flex: 1 1 auto;
    }

    > .button {
      margin-left: auto;

      &.disable-button {
        background-color: $danger-button-color;
        border-color: $danger-button-color;
      }
    }

    > .social-account-username {
      margin-left: auto;
      margin-right: 10px;
      color: $link-color;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}