.container
  .btn-center
    margin: 0 0 20px
    text-align: center

  .btn-beautify
    display: inline-block
    margin: 0 4px 6px
    padding: 0 15px
    background-color: var(--btn-beautify-color, var(--btn-default-color))
    color: var(--btn-color, $btn-color)
    vertical-align: top
    line-height: 2
    addBorderRadius()
    @extend .btn-effects

    for $type in $color-types
      &.{$type}
        --btn-beautify-color: unquote('var(--tags-' + $type + '-color)')

    &:hover
      background-color: var(--btn-hover-color)

    &:not(.block) + .btn-beautify:not(.block)
      margin: 0 4px 20px

    &.block
      display: block
      margin: 0 0 20px
      width: fit-content
      width: -moz-fit-content

      &.center
        margin: 0 auto 20px

      &.right
        margin: 0 0 20px auto

    &.larger
      padding: 6px 15px
      @extend .btn-effects-large

    &.outline
      border: 1px solid transparent
      border-color: var(--btn-beautify-color, var(--btn-default-color))
      background-color: transparent
      color: var(--btn-beautify-color, var(--btn-default-color))

      i,
      span
        transition: color .3s cubic-bezier(.4, 0, .2, 1)

      &::before
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .1), transparent)

      &:hover
        border-color: var(--btn-beautify-color, var(--btn-default-color))
        background-color: var(--btn-beautify-color, var(--btn-default-color))
        color: var(--btn-color) !important

        i,
        span
          color: var(--btn-color)
