.login-with-discord-btn {
  transition: background-color .3s, box-shadow .3s;
    
  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
  
  color: #757575;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoKPGRlZnM+CjwvZGVmcz4KPGcgc3R5bGU9InN0cm9rZTogbm9uZTsgc3Ryb2tlLXdpZHRoOiAwOyBzdHJva2UtZGFzaGFycmF5OiBub25lOyBzdHJva2UtbGluZWNhcDogYnV0dDsgc3Ryb2tlLWxpbmVqb2luOiBtaXRlcjsgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOyBmaWxsOiBub25lOyBmaWxsLXJ1bGU6IG5vbnplcm87IG9wYWNpdHk6IDE7IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjQwNjU5MzQwNjU5MzQwMTYgMS40MDY1OTM0MDY1OTM0MDE2KSBzY2FsZSgyLjgxIDIuODEpIj4KCTxwYXRoIGQ9Ik0gNzMuNDI2IDkwIEggMTYuNTc0IEMgNy40MiA5MCAwIDgyLjU4IDAgNzMuNDI2IFYgMTYuNTc0IEMgMCA3LjQyIDcuNDIgMCAxNi41NzQgMCBoIDU2Ljg1MyBDIDgyLjU4IDAgOTAgNy40MiA5MCAxNi41NzQgdiA1Ni44NTMgQyA5MCA4Mi41OCA4Mi41OCA5MCA3My40MjYgOTAgeiIgc3R5bGU9InN0cm9rZTogbm9uZTsgc3Ryb2tlLXdpZHRoOiAxOyBzdHJva2UtZGFzaGFycmF5OiBub25lOyBzdHJva2UtbGluZWNhcDogYnV0dDsgc3Ryb2tlLWxpbmVqb2luOiBtaXRlcjsgc3Ryb2tlLW1pdGVybGltaXQ6IDEwOyBmaWxsOiByZ2IoMTE0LDEzNywyMTgpOyBmaWxsLXJ1bGU6IG5vbnplcm87IG9wYWNpdHk6IDE7IiB0cmFuc2Zvcm09IiBtYXRyaXgoMSAwIDAgMSAwIDApICIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L3BhdGg+Cgk8cGF0aCBkPSJNIDU2LjkwMSA2Mi45OCBjIDAgMCAtMS41NDEgLTEuODQxIC0yLjgyNSAtMy40NjcgYyA1LjYwOCAtMS41ODQgNy43NDggLTUuMDk0IDcuNzQ4IC01LjA5NCBjIC0xLjc1NSAxLjE1NiAtMy40MjUgMS45NjkgLTQuOTIzIDIuNTI2IGMgLTIuMTQgMC44OTkgLTQuMTk1IDEuNDk4IC02LjIwNyAxLjg0MSBjIC00LjExIDAuNzcxIC03Ljg3NyAwLjU1NyAtMTEuMDg3IC0wLjA0MyBjIC0yLjQ0IC0wLjQ3MSAtNC41MzggLTEuMTU2IC02LjI5MyAtMS44NDEgYyAtMC45ODUgLTAuMzg1IC0yLjA1NSAtMC44NTYgLTMuMTI1IC0xLjQ1NSBjIC0wLjEyOCAtMC4wODYgLTAuMjU3IC0wLjEyOCAtMC4zODUgLTAuMjE0IGMgLTAuMDg2IC0wLjA0MyAtMC4xMjggLTAuMDg2IC0wLjE3MSAtMC4xMjggYyAtMC43NzEgLTAuNDI4IC0xLjE5OSAtMC43MjggLTEuMTk5IC0wLjcyOCBzIDIuMDU1IDMuNDI1IDcuNDkxIDUuMDUxIGMgLTEuMjg0IDEuNjI3IC0yLjg2OCAzLjU1MyAtMi44NjggMy41NTMgQyAyMy41OTYgNjIuNjggMjAgNTYuNDczIDIwIDU2LjQ3MyBjIDAgLTEzLjc4NCA2LjE2NCAtMjQuOTU3IDYuMTY0IC0yNC45NTcgYyA2LjE2NCAtNC42MjMgMTIuMDI5IC00LjQ5NSAxMi4wMjkgLTQuNDk1IGwgMC40MjggMC41MTQgYyAtNy43MDUgMi4yMjYgLTExLjI1OSA1LjYwOCAtMTEuMjU5IDUuNjA4IHMgMC45NDIgLTAuNTE0IDIuNTI2IC0xLjI0MSBjIDQuNTggLTIuMDEyIDguMjE5IC0yLjU2OCA5LjcxNyAtMi42OTcgYyAwLjI1NyAtMC4wNDMgMC40NzEgLTAuMDg2IDAuNzI4IC0wLjA4NiBjIDIuNjExIC0wLjM0MiA1LjU2NSAtMC40MjggOC42NDcgLTAuMDg2IGMgNC4wNjcgMC40NzEgOC40MzMgMS42NyAxMi44ODUgNC4xMSBjIDAgMCAtMy4zODIgLTMuMjExIC0xMC42NTkgLTUuNDM3IGwgMC41OTkgLTAuNjg1IGMgMCAwIDUuODY1IC0wLjEyOCAxMi4wMjkgNC40OTUgYyAwIDAgNi4xNjQgMTEuMTczIDYuMTY0IDI0Ljk1NyBDIDcwIDU2LjQ3MyA2Ni4zNjEgNjIuNjggNTYuOTAxIDYyLjk4IHoiIHN0eWxlPSJzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMTsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgZmlsbDogcmdiKDI1NSwyNTUsMjU1KTsgZmlsbC1ydWxlOiBub256ZXJvOyBvcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSIgbWF0cml4KDEgMCAwIDEgMCAwKSAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PC9wYXRoPgoJPHBhdGggZD0iTSAzNi45OTUgNDIuOTg4IGMgLTIuNDQgMCAtNC4zNjYgMi4xNCAtNC4zNjYgNC43NTIgYyAwIDIuNjExIDEuOTY5IDQuNzUyIDQuMzY2IDQuNzUyIGMgMi40NCAwIDQuMzY2IC0yLjE0IDQuMzY2IC00Ljc1MiBDIDQxLjQwNCA0NS4xMjkgMzkuNDM1IDQyLjk4OCAzNi45OTUgNDIuOTg4IHogTSA1Mi42MiA0Mi45ODggYyAtMi40NCAwIC00LjM2NiAyLjE0IC00LjM2NiA0Ljc1MiBjIDAgMi42MTEgMS45NjkgNC43NTIgNC4zNjYgNC43NTIgYyAyLjQ0IDAgNC4zNjYgLTIuMTQgNC4zNjYgLTQuNzUyIEMgNTYuOTg2IDQ1LjEyOSA1NS4wNiA0Mi45ODggNTIuNjIgNDIuOTg4IHoiIHN0eWxlPSJzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMTsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgZmlsbDogcmdiKDExNCwxMzcsMjE4KTsgZmlsbC1ydWxlOiBub256ZXJvOyBvcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSIgbWF0cml4KDEgMCAwIDEgMCAwKSAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PC9wYXRoPgo8L2c+Cjwvc3ZnPg==);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 12px 11px;
  
  &:hover {
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
  }
  
  &:active {
    background-color: #eeeeee;
  }
  
  &:focus {
    outline: none;
    box-shadow: 
      0 -1px 0 rgba(0, 0, 0, .04),
      0 2px 4px rgba(0, 0, 0, .25),
      0 0 0 3px #c8dafc;
  }
  
  &:disabled {
    filter: grayscale(100%);
    background-color: #ebebeb;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
    cursor: not-allowed;
  }
}