/**
 * Copyright (c) Forward Email LLC
 * SPDX-License-Identifier: BUSL-1.1
 */

// Special thanks to these two sources:
// <https://gist.github.com/twolfson/8f578c0720df7fc87f29e4d8395cf76b>
// <https://github.com/appellation/google-signin-button>
$roboto: 'Roboto-Medium', $font-family-sans-serif;

@mixin button($height) {
  // border-radius: #{$height * (10 / $height)}px;
  .btn-auth-icon {
    background-size: #{$height / 2}px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
    width: #{$height / 2}px;
    height: #{$height}px;
    // border-radius: #{$height / 4}px;
    margin-right: #{$height / 4}px; // #{$height * (12 / $height)}px;
  }
  .btn-auth-text {
    font-size: #{$height * (20 / $height)}px;
    // margin-left: #{$height * (6 / $height)}px;
    // margin-right: #{$height * (6 / $height)}px;
  }
}

// <https://stackoverflow.com/a/60167530>
// <https://codepen.io/sosuke/pen/Pjoqqp>
.btn-auth-icon-fill {
  filter: invert(100%) sepia(95%) saturate(19%) hue-rotate(316deg) brightness(106%) contrast(106%);
}
@media (prefers-color-scheme: dark) {
  .btn-auth-icon-fill {
    filter: invert(0%) sepia(57%) saturate(10%) hue-rotate(251deg) brightness(99%) contrast(100%);
  }
}

.btn-auth-google {
  &:hover {
    box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
  }
}

.btn-auth-github {
  &:hover {
    box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.3);
  }
}

.btn-auth-google-dark {
  background-color: #4285f4;
  &:hover {
    background-color: #4285f4;
  }
  &:active {
    background-color: #3367d6;
  }
  .btn-auth-text {
    color: #fff;
  }
  .btn-auth-icon {
    background-color: #fff;
  }
}

.btn-auth-github-dark {
  background-color: #161514;
  &:hover {
    background-color: #161514;
  }
  &:active {
    background-color: #000;
  }
  .btn-auth-text {
    color: #fff;
  }
  .btn-auth-icon {
    background-color: #fff;
  }
}

.btn-auth-google-light, .btn-auth-github-light {
  $width: 100% !default;
  background-color: #fff;
  &:active {
    background-color: #eee;
    color: #6d6d6d;
  }
  .btn-auth-text {
    color: #757575;
  }
}

.btn-auth {
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
  display: block;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
  color: #E3E3E3 !important;
  border: 1px solid #8E918F !important;
  background-color: #131314 !important;
  @include button(50);
  .btn-auth-text {
    font-family: $roboto;
    display: inline-block;
    letter-spacing: 0.21px;
    vertical-align: middle;
  }
}

.btn-ubuntu {
  @include button-variant(#e95320, darken(#e95320, 10%));
}

@media (prefers-color-scheme: dark) {
  .btn-auth {
    color: #1F1F1F !important;
    border: 1px solid #747775 !important;
    background-color: #FFFFFF !important;
  }
}

.btn-auth-fa-key {
  background-image: url('b64---../img/fa-key.svg---');
}

.btn-auth-apple-logo {
  background-image: url('b64---../img/apple-logo.svg---');
}

.btn-auth-google-logo {
  background-image: url('b64---../img/google-logo.svg---');
}

.btn-auth-github-logo {
  background-image: url('b64---../img/github-logo.svg---');
}
