.Button {
  color: inherit;
  --button-badge-color: #2bc6bf;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  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: var(--font-weight-text-bold);
  line-height: var(--button-height);
  cursor: pointer;
  -webkit-transition: background 0.2s ease, border 0.2s ease, color 0.2s ease, -webkit-transform 0.12s ease;
  transition: background 0.2s ease, border 0.2s ease, color 0.2s ease, -webkit-transform 0.12s ease;
  transition: background 0.2s ease, border 0.2s ease, color 0.2s ease, transform 0.12s ease;
  transition: background 0.2s ease, border 0.2s ease, color 0.2s ease, transform 0.12s ease, -webkit-transform 0.12s ease;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-appearance: none;
  text-decoration: none;
}

  .Button:not(.Button_inline) {
    white-space: nowrap;
    text-overflow: ellipsis;
  }

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

  .Button:after {
    content: attr(data-counter);
    font-size: var(--counter-font-size);
    margin-left: 2px;
  }

  .Button_decorBorder {
    padding-bottom: 10px;
    padding-left: 14px;
    padding-right: 14px;
    border-bottom: 1px solid;
    border-image-slice: 15 27 11 27 fill;
    border-image-width: 10px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    margin-left: -14px;
  }

  .Button_inline {
    display: inline-block !important;
    vertical-align: middle;
  }

  .Button_align_center {
      -webkit-box-pack: center !important;
          -ms-flex-pack: center !important;
              justify-content: center !important;
    }

  .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_2xs {
      --button-height: var(--space-2xl);
      --button-font-size: var(--control-text-size-xs);
      --button-space: var(--control-space-xs);
      text-transform: uppercase;
      letter-spacing: 0.6px;
    }

  .Button_size_2xs.Button_showOnHover {
        --button-space: var(--control-space-2xs);
      }

  .Button_size_2xs.Button_showOnHover:hover {
          --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-xl);
      --button-space: var(--space-l);
    }

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

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

  .Button_size_3xl {
      --button-height: var(--control-height-l);
      --button-font-size: var(--control-text-size-3xl);
      --button-space: var(--control-space-l);
      --counter-font-size: var(--control-text-size-s);
    }

  .Button_size_xxl {
      --button-height: var(--space-xxl);
    }

  .Button_size_3xxl {
      --button-height: var(--space-3xxl);
    }

  .Button_view_primary {
      --color-hover: #fff;
      background-color: var(--color-blue-primary);
      color: #fff;
    }

  .Button_view_primary:hover {
        background-color: var(--color-blue-primary-light);
      }

  .Button_view_primary:active {
        background-color: var(--color-blue-primary-dark);
      }

  .Button_view_secondary {
      background-color: var(--color-orange);
      color: var(--color-reach-black);
    }

  .Button_view_secondary:hover {
        background-color: var(--color-orange-light);
      }

  .Button_view_secondary:active {
        background-color: var(--color-orange-dark);
      }

  .Button_view_borderY {
      border-top: 1px solid var(--color-gainsboro);
      border-bottom: 1px solid var(--color-gainsboro);
      border-radius: 0;
      text-overflow: unset;
      --button-space: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }

  .Button_view_borderY:hover {
        background-color: var(--color-blue-primary-light10);
        color: var(--color-blue-primary-light);
      }

  .Button_view_borderY:active {
        background-color: var(--color-blue-primary-light16);
        color: var(--color-blue-primary-dark);
      }

  .Button_view_borderY:hover:before, .Button_view_borderY:active:before {
          content: attr(data-text);
          font-size: var(--size-text-xs);
          text-transform: uppercase;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
        }

  .Button_view_borderY:hover .Button-Label, .Button_view_borderY:active .Button-Label {
          opacity: 0;
          visibility: hidden;
        }

  .Button_view_borderY .Button-Label {
        width: 100%;
      }

  .Button_view_borderY .marquee-container .overlay {
          display: none;
        }

  .Button_view_borderY .Button-Label span {
        margin: 0 15px;
      }

  .Button_view_transparent {
      text-transform: uppercase;
      --button-font-size: var(--control-text-size-xs);
      --button-space: var(--control-space-s);
      color: var(--color-reach-black);
      letter-spacing: 0.6px;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

  .Button_view_transparent:hover {
        background-color: var(--color-blue-primary-light10);
      }

  .Button_view_transparent.active {
        color: #fff;
        background-color: var(--color-reach-black);
      }

  .Button_view_transparent.Button_inverted {
        color: #fff;
      }

  .Button_view_transparent.Button_inverted.active {
          color: var(--color-reach-black);
          background-color: #fff;
        }

  .Button_view_link-secondary {
      --button-height: auto;
      --button-space: 0;
      --button-font-size: var(--control-text-size-xs);
      --icon-indent: var(--space-xs);
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: var(--color-reach-black);
    }

  .Button_view_link-secondary.Button_inverted {
        color: #fff;
      }

  .Button_view_link-secondary.Button_inverted:hover {
          color: var(--color-decor);
        }

  .Button_view_link-secondary.Button_inverted:active {
          color: var(--color-platinum);
        }

  .Button_view_link-primary {
      --button-font-size: var(--control-text-size-xl);
      --button-height: auto;
      --button-space: 0;
      --icon-indent: var(--space-xs);
      color: var(--color-reach-black);
      overflow: visible;
    }

  @media screen and (max-width: 767px) {

  .Button_view_link-primary {
        --button-font-size: var(--control-text-size-l)
    }
      }

  .Button_view_link-primary.Button_inverted {
        color: #fff;
      }

  .Button_view_link-primary[disabled] {
        opacity: 1;
      }

  .Button_view_link-primary.Button_inline .Button-Label {
          margin-right: var(--space-xs);
        }

  .Button_view_link-primary.Button_inline .Icon {
          margin-left: 0;
          margin-right: 0;
          display: inline-block;
          vertical-align: middle;
        }

  .Button_view_link-primary .Button-Label {
        text-align: left;
      }

  .Button_view_link-primary .Button-Icon {
        position: relative;
      }

  .Button_view_link-primary:hover, .Button_view_link-secondary:hover, .Button_view_ghost:hover {
        color: var(--color-blue-primary-light);
      }

  .Button_view_link-primary:active, .Button_view_link-secondary:active, .Button_view_ghost:active {
        color: var(--color-blue-primary-dark);
      }

  .Button_view_link-primary.Button_inverted:hover, .Button_view_link-secondary.Button_inverted:hover, .Button_view_ghost.Button_inverted:hover {
          color: var(--color-decor);
        }

  .Button_view_link-primary.Button_inverted:active, .Button_view_link-secondary.Button_inverted:active, .Button_view_ghost.Button_inverted:active {
          color: var(--color-decor);
        }

  .Button_view_link-primary.Button_withIcon, .Button_view_link-secondary.Button_withIcon, .Button_view_ghost.Button_withIcon {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
      }

  .Button_view_ghost {
      --button-space: 0;
      --button-height: auto;
    }

  .Button_view_ghost.Button_inverted {
        color: #fff;
      }

  .Button_view_ghost.Button_withIcon .Button-Label {
          text-align: left;
        }

  .Button_view_text {
      font-weight: 500;
    }

  .Button_view_text.active {
        color: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }

  .Button_view_text.active .Button-Label {
          border-radius: 2px;
          padding: 0 var(--space-m);
          margin: calc(var(--space-s) * -1) calc(var(--space-m) * -1);
          background-color: var(--color-reach-black);
          height: 40px;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
        }

  .Button_form_circle {
      border-radius: 100%;
    }

  .Button_form_circle.Button_size_m.Button_onlyIcon {
        width: var(--space-xxl);
        height: var(--space-xxl);
      }

  .Button_form_circle.Button_size_4xl.Button_onlyIcon {
        width: var(--space-4xl);
        height: var(--space-4xl);
      }

  .Button_disabled,
  .Button_loading {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .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 {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .Button_withIcon.Button_width_full {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
    }

  .Button_withIcon.Button_width_full:not(.Button_align_center) .Icon {
          margin-left: auto;
        }

  .Button_withIcon:hover .IconArrowRight.Button-Icon {
        position: relative;
        -webkit-transform: translateX(3px);
                transform: translateX(3px);
      }

  .Button_showOnHover:hover .Button-Label {
        display: inline-block;
      }

  .Button_showOnHover:hover .Button-Icon {
        display: none;
      }

  .Button_showOnHover .Button-Label {
      display: none;
    }

  .Button_showOnHover .Button-Icon_position_right {
      margin-left: 0;
    }

  .Button_badge {
    overflow: visible;

    --button-badge-inverted: inherit;
  }

  .Button_badge:after {
      content: attr(data-badge-text);
      display: inline-block;
      font-size: 12px;
      letter-spacing: 0.3px;
      text-transform: uppercase;
      font-weight: 600;
      line-height: 16px;
      padding: 2px 2px 2px;
      background-color: var(--button-badge-color);
      margin-top: -2px;
      margin-left: 10px;
      border-radius: 1px;
      -webkit-transform: rotate(-5deg);
              transform: rotate(-5deg);
      position: relative;
      color: var(--button-badge-inverted);
    }

  .Button-Icon {
    display: block;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-transition: 0.3s -webkit-transform ease-in-out;
    transition: 0.3s -webkit-transform ease-in-out;
    transition: 0.3s transform ease-in-out;
    transition: 0.3s transform ease-in-out, 0.3s -webkit-transform ease-in-out;
  }

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

  .Button-Icon_position_right {
        margin-left: var(--space-xs);
      }

  .Button-Icon .Picture {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }

  .Button-Label {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
  }

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

  .Button_color_primary {
      color: var(--color-blue-primary-light);
    }

  .Button_color_secondary {
      color: var(--color-orange);
    }

  .Button_color_secondary:hover {
        color: #fff;
      }

  .Button_color_inherit {
      color: inherit;
    }
