.cux-button-icon {
  @include font-size(20);
  $border-width: 2px;
  $button-size: 40px;
  color: inherit;
  margin: $margin-half 0 0;
  line-height: $button-size;
  display: inline-block;
  position: relative;

  &:hover,
  &:focus,
  &:active {
    color: inherit;
    text-decoration: none;
  }

  .button-svg {
    display: inline-block;
    height: $button-size;
    width: $button-size;
    border-radius: 50%;
    border: $border-width solid currentColor;
    text-align: center;
    margin: 0 $margin-half 0 0;
    padding: 0;
    background-color: rgba($color-black, .15);
    line-height: 1;
    transition: background-color .2s;
    vertical-align: middle;
    position: relative;
    top: -1px;

    &:nth-last-child(1) {
      margin: 0 0 0 $margin-half;
    }

    svg {
      fill: currentColor;
      height: $button-size / 2;
      margin: 0 0 0 .1em;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  [class^='icon-'],
  [class*=' icon-'] {
    color: $color-white;
    display: inline-block;
    height: 1.2em;
    width: 1.2em;
    line-height: 1.2em;
    border-radius: 50%;
    text-align: center;
    margin: 0 $margin-half 0 0;
    padding: 0;
    background-color: $text-color;
    transition: background-color .2s;
    vertical-align: middle;
    position: relative;
    top: -1px;

    &:nth-last-child(1) {
      margin: 0 0 0 $margin-half;
    }

    &:before {
      position: relative;
      left: .03em;
      top: .15em;
    }
  }

  .icon-way-up {
    &:before {
      top: .25em;
    }
  }

  .icon-way-down {
    &:before {
      top: .05em;
    }
  }

  .icon-way-left {
    &:before {
      left: .1em;
    }
  }

  .icon-way-right {
    &:before {
      left: -.05em;
    }
  }

  .button-text {
    display: inline-block;
    vertical-align: center;
  }

  .color-white &,
  .color-tui-white & {
    .button-svg {
      background-color: rgba($color-white, .15);

      @media (max-width: $screen-xs-max) {
        background-color: rgba($color-black, .15);
      }
    }

    &:hover .button-svg {
      background-color: rgba($color-white, .3);

      @media (max-width: $screen-xs-max) {
        background-color: rgba($color-black, .3);
      }
    }
  }
}