$default-button-height: 4.0rem;

.button {
  align-items: center;
  display: inline-flex;
  height: $default-button-height;
  margin-bottom: 0;

  .button__content {
    width: 100%;
  }

  .spinner {
    padding: 0 var(--space-small);
  }

  .icon--emoji+.button__content {
    padding-left: var(--space-small);
  }

  .icon--font+.button__content {
    padding-left: var(--space-small);
  }

  // @TODDO - Remove after moving all buttons to woot-button
  .icon+.button__content {
    padding-left: var(--space-small);
  }

  &.expanded {
    display: flex;
    justify-content: center;
  }

  &.round {
    border-radius: $space-larger;
  }

  // @TODO Use with link

  &.compact {
    padding-bottom: 0;
    padding-top: 0;
  }

  // Smooth style
  &.smooth {
    @include button-style(var(--w-50), var(--w-100), var(--w-700));


    &.secondary {
      @include button-style(var(--s-50), var(--s-100), var(--s-700));
    }

    &.success {
      @include button-style(var(--g-50), var(--g-100), var(--g-700));
    }

    &.alert {
      @include button-style(var(--r-50), var(--r-100), var(--r-700));
    }

    &.warning {
      @include button-style(var(--y-100), var(--y-200), var(--y-900));
    }
  }

  // Sizes
  &.tiny {
    height: var(--space-medium);
  }

  &.small {
    height: var(--space-large);
  }

  &.large {
    height: var(--space-larger);
  }

  &.button--only-icon {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    width: $default-button-height;

    &.tiny {
      width: var(--space-medium);
    }

    &.small {
      width: var(--space-large);
    }

    &.large {
      width: var(--space-larger);
    }
  }

  &.link {
    height: auto;
    margin: 0;
    padding: 0;
  }


}


// @TDOD move to utility file
.button--fixed-right-top {
  position: fixed;
  right: $space-small;
  top: $space-small;
}