.button {
  margin-bottom: 0;

  &.button--emoji {
    align-items: center;
    background: var(--b-50);
    border: 1px solid var(--color-border-light);
    border-radius: var(--border-radius-large);
    display: flex;
    font-size: var(--font-size-small);
    height: var(--space-large);
    justify-content: center;
    padding: var(--space-micro);
    text-align: center;
    width: var(--space-large);

    &:hover {
      background: var(--b-200);
    }
  }



  &.icon {
    padding-left: $space-normal;
    padding-right: $space-normal;

    i {
      padding-right: $space-small;
    }
  }

  &.nice {
    border-radius: $space-smaller;
  }

  &.hollow {
    &.link {
      border-color: transparent;
      padding-left: 0;

      &:hover,
      &:focus {
        border-color: transparent;
      }
    }
  }

  >.icon {
    font-size: $font-size-default;
  }

  &.tiny {
    font-size: $font-size-mini;
    padding: $space-small $space-slab;
  }

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

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

.button--fixed-right-top {
  position: fixed;
  right: $space-small;
  top: $space-small;
}