.Button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 100%;
  height: var(--button-height);
  padding: 0 var(--button-space);
  background: transparent;
  border: none;
  border-radius: var(--control-radius);
  font-family: var(--font-primary);
  font-size: var(--button-font-size);
  font-weight: normal;
  line-height: var(--button-height);
  white-space: nowrap;
  text-decoration: none;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, fill 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, fill 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
    color 0.15s ease, fill 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
    color 0.15s ease, fill 0.15s ease, -webkit-box-shadow 0.15s ease;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-appearance: none;
}

  .Button:hover {
    color: var(--color-hover);
  }

  .Button_form_brick {
      border-radius: 0;
    }

  .Button_form_round {
      padding-right: calc(var(--button-space)*1.2);
      padding-left: calc(var(--button-space)*1.2);
      border-radius: 99rem;
    }

  .Button_form_brickDefault {
      border-radius: 0 var(--control-radius) var(--control-radius) 0;
    }

  .Button_form_defaultBrick {
      border-radius: var(--control-radius) 0 0 var(--control-radius);
    }

  .Button_form_brickRound {
      padding-right: calc(var(--button-space)*1.2);
      border-radius: 0 99rem 99rem 0;
    }

  .Button_form_roundBrick {
      padding-left: calc(var(--button-space)*1.2);
      border-radius: 99rem 0 0 99rem;
    }

  .Button_size_xs {
      --button-height: var(--control-height-xs);
      --button-font-size: var(--control-text-size-xs);
      --button-space: var(--control-space-xs);
    }

  .Button_size_s {
      --button-height: var(--control-height-s);
      --button-font-size: var(--control-text-size-s);
      --button-space: var(--control-space-s);
    }

  .Button_size_m {
      --button-height: var(--control-height-m);
      --button-font-size: var(--control-text-size-m);
      --button-space: var(--control-space-m);
    }

  .Button_size_l {
      --button-height: var(--control-height-l);
      --button-font-size: var(--control-text-size-l);
      --button-space: var(--control-space-l);
    }

  .Button_view_clear {
      --color-hover: var(--color-control-typo-clear-hover);
      color: var(--color-control-typo-clear);
      background-color: var(--color-control-bg-clear);
    }

  .Button_view_clear:hover {
        background-color: var(--color-control-bg-clear-hover);
      }

  .Button_view_ghost {
      --color-hover: var(--color-control-typo-ghost-hover);
      color: var(--color-control-typo-ghost);
      background-color: var(--color-control-bg-ghost);
    }

  .Button_view_ghost:hover {
        background-color: var(--color-control-bg-ghost-hover);
      }

  .Button_view_primary {
      --color-hover: var(--color-control-typo-primary-hover);
      color: var(--color-control-typo-primary);
      background-color: var(--color-control-bg-primary);
    }

  .Button_view_primary:hover {
        background-color: var(--color-control-bg-primary-hover);
      }

  .Button_view_secondary {
      --color-hover: var(--color-control-typo-secondary-hover);
      color: var(--color-control-typo-secondary);
      background-color: var(--color-control-bg-secondary);
      border: var(--control-border-width) solid var(--color-control-bg-border-secondary);
      line-height: calc(var(--button-height) - var(--control-border-width)*2);
    }

  .Button_view_secondary:hover {
        background-color: var(--color-control-bg-secondary-hover);
        border-color: var(--color-control-bg-border-secondary-hover);
      }

  .Button_disabled,
  .Button_loading {
    background-color: var(--color-control-bg-disable);
    border-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
  }

  .Button_disabled {
    color: var(--color-control-typo-disable);
  }

  .Button_loading {
    color: transparent;
  }

  .Button_width_full {
      width: 100%;
    }

  .Button_onlyIcon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: var(--button-height);
    padding: 0;
  }

  .Button_withIcon {
    --icon-indent: calc(var(--button-space)*0.7);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .Button-Icon {
    display: block;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  .Button-Icon_position_left {
        margin-right: var(--icon-indent);
      }

  .Button-Icon_position_right {
        margin-left: var(--icon-indent);
      }

  .Button-Label {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
        flex-shrink: 1;
  }

  .Button_loading .Button-Loader {
    --loaderBackgroundColor: var(--color-control-typo-disable);
    position: absolute;
  }
