$textbox-repeater--button--background: #3e4959;
$textbox-repeater--button--background--hover: lighten($textbox-repeater--button--background, 7%);
$textbox-repeater--button--border: rgba(#0f151b, 0.2);
$textbox-repeater--button--border--hover: rgba(#0f151b, 0.4);
$textbox-repeater--button--foreground: rgba(#12191f, 0.7);
$textbox-repeater--button--foreground--hover: #12191f;

.floating-action {

  &__button {
    background: $textbox-repeater--button--background;
    border: none;
    border-radius: 16px;
    box-shadow: 0 0 0 1px $textbox-repeater--button--border;
    cursor: pointer;
    height: 16px;
    outline: none;
    margin-right: 6px;
    padding: 0;
    position: relative;
    transition: background 0.25s, box-shadow 0.25s;
    width: 16px;

    &:last-child {
      margin-right: 0;
    }

    &:hover {
      background: $textbox-repeater--button--background--hover;
      box-shadow: 0 0 0 1px $textbox-repeater--button--border--hover;

      .icon {
        fill: $textbox-repeater--button--foreground--hover;
      }
    }

    .icon {
      height: 8px;
      fill: $textbox-repeater--button--foreground;
      left: 50%;
      position: absolute;
      top: 50%;
      transition: fill 0.25s;
      transform: translate(-50%, -50%);
      width: 8px;
    }
  }
}