@import "../../styles/border";
@import "../../styles/color";
@import "../../styles/type";
@import "../../styles/layout";
@import "~@cultureamp/kaizen-design-tokens/sass/color";

$caButton-border-width: 1px;
$caButton-focus-border-width: 2px;
$caButton-height: $ca-grid * 2;
$caButtonIcon-height: 20px;
$caButton-formHeight: $ca-grid * 5/3;
$caButton-verticalPadding: calc(#{$ca-grid / 2} - #{$caButton-border-width});
$caButton-verticalPaddingForm: calc(
  #{$ca-grid / 3} - #{$caButton-border-width}
);

// reset user agent syles for button elment type
@mixin button-reset {
  appearance: none;
  background: transparent;
  border: none;
  font: inherit;
  margin: 0;
  padding: 0;
  transition: none; // override Murmur global styles :(
}

%caButtonContainer {
  @include ca-type-block(inline-block);
}

%caButton {
  @include button-reset;
  @include ca-type-ideal-button;

  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: $caButton-height;
  border: $caButton-border-width solid;
  border-radius: $ca-border-radius;
  // looking for padding? See %caButtonContent

  &[href] {
    text-decoration: none;
  }

  // Enabled (to restrict application of hover/focus/active styles)
  //
  // We can't just used :enabled here, because we want to be able to apply these
  // styles to non-form elements, such as hyperlinks. :not(:disabled) is
  // equivalent to :enabled on form elements, but also allows these styles to be
  // applied to elements that have no enabled/disabled states.
  &:not(:disabled) {
    background: $kz-color-white;
    border-color: $kz-color-wisteria-500;
    color: $kz-color-wisteria-800;

    &:hover {
      background: $kz-color-wisteria-100;
      border-color: $kz-color-wisteria-700;
    }

    &:active {
      background: $kz-color-ash;
      border-color: $kz-color-wisteria-500;
      transform: translateY(1px);
    }

    // Use JS polyfill to simulate :focus-visible, not yet supported by browsers
    // https://github.com/WICG/focus-visible#backwards-compatibility
    :global(.js-focus-visible) & {
      // hide native focus ring when :focus but not :focus-visible
      &:focus {
        outline: none;
      }

      // show custom focus ring when :focus-visible
      &:global(.focus-visible) {
        border: $caButton-focus-border-width solid $kz-color-cluny-500;
      }
    }
  }

  // Disabled
  &:disabled {
    background: $kz-color-white;
    border-color: add-alpha($kz-color-wisteria-500, 30%);
    color: add-alpha($kz-color-wisteria-800, 30%);
  }
}

%caButtonForm {
  min-height: $caButton-formHeight;
}

%caButtonPrimary,
%caButtonDestructive {
  &:not(:disabled) {
    background: #58b59a; // equal to add-tint($ca-palette-seedling, 10%). Temporary until we upgrade to Zen (Wisteria)
    border-color: #58b59a;
    color: $kz-color-white;

    &:hover {
      background: #45ad8f; // equal to $ca-palette-seedling. Temporary until we upgrade to Zen (Wisteria)
      border-color: #45ad8f;
    }

    &:active {
      background: #58b59a; // equal to add-tint($ca-palette-seedling, 10%). Temporary until we upgrade to Zen (Wisteria)
      border-color: #58b59a;
    }
  }

  &:disabled {
    color: $kz-color-white;
    background: add-alpha($kz-color-seedling-500, 30%);
    border-color: transparent;
  }
}

%caButtonDestructive {
  &:disabled {
    background: add-alpha($kz-color-coral-500, 30%);
  }
}

%caButtonDestructive:not(:disabled) {
  background: $kz-color-coral-500;
  border-color: $kz-color-coral-500;

  &:hover {
    background: $kz-color-coral-600;
    border-color: $kz-color-coral-600;
  }

  &:active {
    background: $kz-color-coral-600;
    border-color: $kz-color-coral-600;
  }

  :global(.js-focus-visible) &:global(.focus-visible) {
    border-color: $kz-color-coral-600;
  }
}

%caButtonSecondary {
  @include ca-type-ideal-body-bold;

  &:not(:disabled) {
    background: transparent;
    border-color: transparent;
    color: $kz-color-cluny-500;

    %caButtonLabel {
      color: $kz-color-cluny-500;
    }

    &:hover,
    &:active {
      color: $kz-color-cluny-500;
      background: $kz-color-wisteria-100;
      border-color: transparent;
    }

    &:active {
      background: add-alpha($kz-color-wisteria-800, 30%);
    }
  }

  &:disabled {
    background: transparent;
    border-color: transparent;
    color: add-alpha($kz-color-cluny-500, 30%);
  }
}

%caButtonReversed {
  &:not(:disabled) {
    background: transparent;
    border-color: $kz-color-white;
    color: $kz-color-white;

    &:hover {
      background: add-alpha($kz-color-white, 10%);
      border-color: $kz-color-white;
    }

    :global(.js-focus-visible) &:global(.focus-visible) {
      border-color: $kz-color-yuzu-500;

      &:not(:active) {
        background: add-alpha($kz-color-white, 10%);
      }
    }

    &:active {
      background: add-alpha($kz-color-white, 20%);
      border-color: $kz-color-white;
    }
  }

  &:disabled {
    background: transparent;
    border-color: add-alpha($kz-color-white, 30%);
    color: add-alpha($kz-color-white, 30%);
  }

  &%caButtonPrimary {
    &:not(:disabled) {
      background: $kz-color-white;
      border-color: transparent;
      color: $kz-color-wisteria-800;

      &%caButtonReverseColorLapis {
        color: $kz-color-wisteria-800;
      }

      // to be deprecated or renamed to caButtonReverseColorCluny
      &%caButtonReverseColorOcean {
        color: $kz-color-cluny-500;
      }

      &%caButtonReverseColorPeach {
        color: $kz-color-peach-500;
      }

      &%caButtonReverseColorSeedling {
        color: $kz-color-seedling-500;
      }

      &%caButtonReverseColorWisteria {
        color: $kz-color-wisteria-500;
      }

      &%caButtonReverseColorYuzu {
        color: $kz-color-yuzu-500;
      }

      &:hover {
        background: add-alpha($kz-color-white, 95%);
      }

      :global(.js-focus-visible) &:global(.focus-visible) {
        border-color: $kz-color-cluny-500;

        &:not(:active) {
          background: add-alpha($kz-color-white, 95%);
        }
      }

      &:active {
        background: add-alpha($kz-color-white, 90%);
        border-color: transparent;
      }
    }

    &:disabled {
      background: add-alpha($kz-color-white, 10%);
      border-color: transparent;
    }
  }

  &%caButtonSecondary {
    &:not(:disabled) {
      background: transparent;
      border-color: transparent;
      color: $kz-color-white;

      %caButtonLabel {
        color: $kz-color-white;
      }

      &:hover {
        background: add-alpha($kz-color-white, 10%);
      }

      &:active {
        background: add-alpha($kz-color-white, 20%);
      }

      :global(.js-focus-visible) &:global(.focus-visible) {
        border-color: $kz-color-yuzu-500;

        &:not(:active):not(:hover) {
          background: transparent;
        }
      }
    }

    &:disabled {
      background: transparent;
      border-color: transparent;
      color: add-alpha($kz-color-white, 30%);
    }
  }
}

%caButtonContent {
  height: 100%;
  display: flex;
  align-items: center;

  padding: $caButton-verticalPadding
    calc(#{$ca-grid * 1} - #{$caButton-border-width});

  %caButtonSecondary & {
    padding-left: calc(#{$ca-grid * 0.5} - #{$caButton-border-width});
    padding-right: calc(#{$ca-grid * 0.5} - #{$caButton-border-width});
  }

  %caButtonForm & {
    padding-top: $caButton-verticalPaddingForm;
    padding-bottom: $caButton-verticalPaddingForm;
  }

  :global(.js-focus-visible) %caButton:global(.focus-visible) & {
    padding: calc(#{$ca-grid / 2} - #{$caButton-focus-border-width})
      calc(#{$ca-grid * 1} - #{$caButton-focus-border-width});
  }

  :global(.js-focus-visible) %caButtonSecondary:global(.focus-visible) & {
    padding: calc(#{$ca-grid / 2} - #{$caButton-focus-border-width})
      calc(#{$ca-grid * 0.5} - #{$caButton-focus-border-width});
  }

  :global(.js-focus-visible) %caButton%caButtonForm:global(.focus-visible) & {
    padding: calc(#{$ca-grid / 3} - #{$caButton-focus-border-width})
      calc(#{$ca-grid * 1} - #{$caButton-focus-border-width});
  }

  :global(.js-focus-visible)
    %caButtonSecondary%caButtonForm:global(.focus-visible)
    & {
    padding: calc(#{$ca-grid / 3} - #{$caButton-focus-border-width})
      calc(#{$ca-grid * 0.5} - #{$caButton-focus-border-width});
  }
}

%caButtonLabel {
  // This line height equates to 3/4 of a grid unit - so 18px. We set this
  // here rather than in ca-type-ideal-button because changing the type style
  // changes the baseline grid alignment for all buttons. Changing it here keeps
  // the baseline alignment correct for single line buttons.
  line-height: 1;

  &:only-child {
    margin: 0 $ca-grid / 2;

    %caButtonSecondary & {
      margin: 0;
    }
  }

  &:not(:first-child) {
    @include ca-margin($start: 0.5em);
  }

  &:not(:last-child) {
    @include ca-margin($end: 0.5em);
  }
}

%caButtonIconWrapper {
  height: $caButtonIcon-height;
  align-self: flex-start;
}

%caButtonIconButton {
  width: $caButton-height;

  // Reset for various states and variants
  &:not(:disabled),
  &:disabled {
    &,
    &:hover,
    &:active,
    &%caButtonPrimary,
    &%caButtonSecondary {
      color: $kz-color-wisteria-800;
      background: none;
      border-color: transparent;

      &%caButtonReversed {
        color: white;
        &%caButtonPrimary {
          %caButtonContent {
            color: white;
            background: none;
          }
        }
      }
    }
  }
  &%caButtonReversed,
  :global(.js-focus-visible) &:global(.focus-visible) {
    %caButtonContent {
      padding: 0;
    }
  }

  %caButtonContent {
    justify-content: center;
    width: 100%;
    padding: 0;
    // IE 10/11 workaround to fix vertical centering of icon
    margin: calc(
        (((#{$caButton-height}) - #{$caButtonIcon-height}) / 2) - #{$caButton-border-width}
      )
      0;
  }

  &%caButtonForm {
    width: $caButton-formHeight;
  }

  &%caButtonDestructive:not(:disabled) {
    &:hover,
    &:active {
      color: $kz-color-coral-500;
    }

    :global(.js-focus-visible) &:global(.focus-visible) {
      border-color: $kz-color-cluny-500;
    }
  }
}

%caButtonDestructiveModifier {
  &:not(:disabled) {
    color: $kz-color-coral-600;

    %caButtonLabel {
      color: $kz-color-coral-600;
    }
  }

  &:hover span,
  &:active span {
    color: $kz-color-coral-600;
  }
}