@import 'base';
@import './directives/_processing.scss';
$dcom-button-height       : 40px;
$dcom-button-height-small : 30px;
$dcom-spinner-size        : 32px;
$dcom-spinner-size-small  : 20px;

input .dcom-button {
  //re-add border radius which was removed for ios
  border-radius: 3px;
}

.dcom-button {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  overflow: hidden;
  padding: (($dcom-button-height - $font-line-height-button) / 2) $gutter;
  border: none;
  border-radius: 3px;
  color: $primary-text-color-contrast;
  cursor: pointer;
  font-size: $font-size-button;
  line-height: $font-line-height-button;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.1s linear 0s;
  outline: 0;
  height: 40px;

  @include tablet {
    padding: (($dcom-button-height - $font-line-height-button) / 2) $gutter-large;
  }

  &:hover, &:active, &:focus {
    text-decoration: none;
  }

  &.small {
    height: $dcom-button-height-small;
    padding: (($dcom-button-height-small - $font-line-height-button) / 2) $gutter-large;
    font-size: $font-size-main;
    line-height: $font-line-height-main;

    .spinner {
      width: $dcom-spinner-size /2;
      height: $dcom-spinner-size /2;
      margin-top: -($dcom-spinner-size / 4);
      margin-left: -($dcom-spinner-size / 4);
    }
  }

  &.primary {
    @include button-states($blue-primary, $blue-hover, $blue-primary);

    &.disabled,
    &[disabled] {
      @include button-states($disabled-color, $disabled-color, $disabled-color);
    }
  }

  &.secondary {
    background-color: white;
    color: $blue-primary;
    border: 1px solid $secondary-button-border;

    &:hover, &:focus {
      border-color: $secondary-button-border-hover;
    }

    &:active {
      background-color: $blue-primary;
      color: white;
    }

    &.disabled,
    &[disabled] {
      color: $disabled-color;;
      border-color: $disabled-color;
      &:active,
      &:focus,
      &:active {
        background-color: white;
        color: $blue-primary;
      }
    }
  }

  &.transparent {
    background-color : transparent;
    background-image: none;
  }

  &.tertiary {
    @include button-states(#fff, #fff, #fff);
    color: $primary-color;
    border-radius: 3px;
  }

  &.link {
    color: $blue-primary;
    background: transparent;
    border: none;

    &.disabled,
    &[disabled] {
      color: $disabled-color;
    }
  }

  &.disabled,
  &[disabled] {
    cursor: not-allowed;
  }

  &.with-subtotal {
    text-align: left;
    padding-left: $gutter;
    padding-right: $gutter;

    .subtotal {
      position: absolute;
      top: 7px;
      right: $gutter;
      background-color: $action-color-contrast-dark;
      padding: 2px 8px;
    }

    &.disabled {
      .subtotal {
        background-color: $disabled-color-darker;
      }
    }
  }

  // Spinner
  .spinner {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: $dcom-spinner-size;
    height: $dcom-spinner-size;
    margin-top: -($dcom-spinner-size / 2);
    margin-left: -($dcom-spinner-size / 2);
    opacity: 0;
    box-sizing: border-box;
  }

  .contents {
    display: block;
  }

  &.processing {
    //min-width: 80px;
    .contents {
      opacity: 0;
      display: none;
      transform: scale(0.5);
    }
    .spinner {
      opacity: 1;
      display: block;
      transform: none;
    }
  }
  &.small {
    .spinner {
      width: $dcom-spinner-size-small;
      height: $dcom-spinner-size-small;
      margin-top: -($dcom-spinner-size-small / 2);
      margin-left: -($dcom-spinner-size-small / 2);
    }
  }

  &.facebook,
  &.twitter {
    margin-bottom: $gutter-large;
    &:before{
      font-family: 'dcom-ico-font';
      position:absolute;
      left:5px;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      top: 6px;
      height: 28px;
      line-height: 25px;
      float: left;
      width: 33px;
      border-right: 1px solid white;
      display:block;
      padding-right: $gutter;
      color: $primary-text-color-contrast;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    &:after{
      padding-left: 40px;
      float:left;
      width: 195px;
    }
  }

  &.twitter{
    margin-bottom: $gutter-large;
    transition: background-color 0.2s linear 0s;
    background-color : $twitter-btn-background;
    &:hover, &:focus{
      background-color : #35c0f6;
    }
    &:active{
      background-color : #1ab2e8;
      background-image : none;
      transition: none;
    }
  }

  &.facebook{

    background-color: $facebook-btn-background;
    transition: background-color 0.2s linear 0s;

    &:hover, &:focus{
      background-color : #4b66a9;
    }
    &:active{
      background-color : #3c599b;
      background-image : none;
      transition: none;
    }
  }
}

.guest-checkout-button{
  background: #fff;
  border: 1px solid $secondary-action-color;
  color: $secondary-action-color;
}

.fixed-cta {
  position: fixed;
  z-index: $z-index-fixed-cta;
  bottom: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.5);
  box-sizing: border-box;

  .dcom-button {
    display: block;
    padding-left: $gutter;
    padding-right: $gutter;
    margin: $gutter;
  }
}

// a button that looks like an anchor
.dcom-button-anchor {
  background: none;
  border: none;
  padding: 0;
  color: $primary-color;
  font-size: 1rem;
  cursor: pointer;
}

// SDK has no color property for button subtotal secondary color so overwrite it on menuConnect
.is-iframe {
   .dcom-button,
  .btn-wrapper,
  input[type="submit"] .dcom-button {
    .subtotal {
      background-color: transparent !important;
    }
  }
}