@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-fab-size: 112px !default;
$ink-fab-size-sm: 80px !default;
$ink-fab-font-size: $ink-font-size-md !default;
$ink-fab-line-height: $ink-line-height-md !default;
$ink-fab-color: $ink-color-white !default;
$ink-fab-icon-size: 48px !default;
$ink-fab-icon-color: $ink-color-white !default;
$ink-fab-bg-color: $ink-color-brand !default;
$ink-fab-bg-color-active: $ink-color-brand-dark !default;
$ink-fab-box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.2), 0 12px 20px 0 rgba(0, 0, 0, 0.14), 0 2px 36px 0 rgba(0, 0, 0, 0.12) !default;
$ink-fab-box-shadow-active: 0 14px 16px -8px rgba(0, 0, 0, 0.2), 0 24px 34px 4px rgba(0, 0, 0, 0.14), 0 10px 44px 8px rgba(0, 0, 0, 0.12) !default;

.ink-fab {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  width: $ink-fab-size;
  height: $ink-fab-size;
  color: $ink-fab-color;
  font-size: $ink-fab-font-size;
  line-height: $ink-fab-line-height;
  text-align: center;
  border-radius: $ink-border-radius-circle;
  background: $ink-fab-bg-color;
  box-shadow: $ink-fab-box-shadow;
  box-sizing: border-box;

  &:active {
    background: $ink-fab-bg-color-active;
    box-shadow: $ink-fab-box-shadow-active;
  }

  &__icon {
    width: $ink-fab-icon-size;
    height: $ink-fab-icon-size;
    font-size: $ink-fab-icon-size;
    color: $ink-fab-icon-color;
  }

  &--small {
    width: $ink-fab-size-sm;
    height: $ink-fab-size-sm;
  }
}