$login-button-bg-color: #d2cec3;
$login-button-border-color: #b4ae9c;
$login-button-text-color: #000;
$login-button-font-size: 14;
$login-button-icon-size: 32;
$login-button-max-width: 222;
$login-button-min-width: 175;

@function em($pxval, $context: $button-font-size) {
  @return #{$pxval/$context}em;
}

@mixin cwui-login-button {
  .c-login-button {
    background: $login-button-bg-color;
    border: .07143em solid $login-button-border-color;
    border-radius: .21429em;
    color: $login-button-text-color;
    cursor: pointer;
    display: inline-table;
    font-family: "Source Sans Pro", sans-serif;
    font-size: #{$login-button-font-size}px;
    line-height: 1;
    margin-bottom: 1em;
    max-width: #{$login-button-max-width}px;
    min-width: #{$login-button-min-width}px;
    overflow: hidden;
    padding: 0;
    text-decoration: none;

    &:hover {
      color: #b45206;
      text-decoration: underline;
    }

    &.expand {
      width: 100%;
    }
  }

  .c-login-button,
  .c-login-button__text,
  .c-login-button__addon {
    box-sizing: border-box;
  }

  .c-login-button__text,
  .c-login-button__addon {
    display: table-cell;
    vertical-align: middle;
  }

  .c-login-button__text {
    font-size: 1em;
    padding: .71429em;
  }

  .c-login-button__addon {
    background: #d08446;
    border-left: .07143em solid #fff;
    padding: .71429em;
    width: 3.57143em;

    &:first-child {
      border-left: 0;
      border-right: .07143em solid #fff;
    }
  }

  .c-login-button__icon {
    background: url("../images/login-buttons/icon-default.svg") 0 0 no-repeat;
    background-size: 100%;
    display: block;
    height: 2.28571em;
    width: 2.28571em;
  }

  .c-login-button__addon > .c-login-button__icon {
    margin: 0 auto;
  }

  .account-center.c-login-button {
    .c-login-button__addon {
      background-color: #960000;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-account-center.svg");
    }
  }

  .blackboard.c-login-button {
    .c-login-button__addon {
      background-color: #000;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-blackboard.svg");
    }
  }

  .google.c-login-button {
    .c-login-button__addon {
      background-color: #eee;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-google.svg");
    }
  }

  .linkedin.c-login-button {
    .c-login-button__addon {
      background-color: #0077b5;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-linkedin.svg");
    }
  }

  .lynda.c-login-button {
    .c-login-button__addon {
      background-color: #f2c001;
      padding: .14286em;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-lynda.svg");
      height: 2.85714em;
      width: 2.85714em;
    }
  }

  .office365.c-login-button {
    .c-login-button__addon {
      background: #2272b9;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-office365.svg");
    }
  }

  .univ-flame.c-login-button {
    .c-login-button__addon {
      background-color: #960000;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-univ-flame.svg");
    }
  }

  .teamdynamix.c-login-button {
    .c-login-button__addon {
      background-color: #272c70;
      padding: .14286em;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-teamdynamix.svg");
      height: 2.85714em;
      width: 2.85714em;
    }
  }

  .univ-wildcat.c-login-button {
    .c-login-button__addon {
      background-color: #960000;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-univ-wildcat.svg");
    }
  }

  .hr.c-login-button {
    .c-login-button__addon {
      background-color: #960000;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-hr.svg");
      transform: scale(1.2);
    }
  }

  .cs.c-login-button {
    .c-login-button__addon {
      background-color: #00758f;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-cs.svg");
      transform: scale(1.2);
    }
  }

  .wildcat-sync.c-login-button {
    .c-login-button__addon {
      background-color: #960000;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-wildcat-sync.svg");
      transform: scale(1.2);
    }
  }

  .sumtotal.c-login-button {
    .c-login-button__addon {
      background-color: #ff9908;
    }

    .c-login-button__icon {
      background-image: url("../images/login-buttons/icon-sumtotal.svg");
      transform: scale(1.2);
    }
  }
}