.button {
  --button-border-color: #423E38;
  --button-background-color: transparent;
  --button-text-color: #423E38;
  --button-border-radius: 2px;
  --button-font-size: 14px;
  --button-font-weight: 700;
  --button-padding-top: 15px;
  --button-padding-right: 20px;
  --button-padding-bottom: 15px;
  --button-padding-left: 20px;
  --button-text-transform: uppercase;
  --button-disabled-content-color: #d8d8d8;
  --button-disabled-bg-color: #f2f2f2;
  --icon-fill-color: var(--button-text-color);
  border: 1px solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  background: var(--button-background-color);
  color: var(--button-text-color);
  padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  text-transform: var(--button-text-transform);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  vertical-align: middle;
  line-height: var(--default-line-height); }
  .button:disabled {
    --button-background-color: var(--button-disabled-bg-color) !important;
    --button-border-color: var(--button-disabled-bg-color) !important;
    --button-text-color: var(--button-disabled-content-color) !important;
    --icon-fill-color: var(--button-disabled-content-color) !important; }
  .button__icon {
    --icon-width: 18px;
    --icon-height: 18px;
    display: block; }
  .button_bg_success {
    --button-border-color: #48A631;
    --button-background-color: #48A631;
    --button-text-color: #fff; }
    .button_bg_success:hover {
      --button-border-color: #84CD72;
      --button-background-color: #84CD72;
      --button-text-color: #fff; }
  .button_bg_info {
    --button-border-color: #2977D2;
    --button-background-color: #2977D2;
    --button-text-color: #fff; }
    .button_bg_info:hover {
      --button-border-color: #60A9FF;
      --button-background-color: #60A9FF;
      --button-text-color: #fff; }
  .button_bg_danger {
    --button-border-color: #D2292E;
    --button-background-color: #D2292E;
    --button-text-color: #fff; }
    .button_bg_danger:hover {
      --button-background-color: #ff8184;
      --button-text-color: #fff; }
    .button_bg_danger:active {
      --button-background-color: var(--default-color);
      --button-text-color: #fff; }
  .button_bg_light {
    --button-border-color: #dbdbdb;
    --button-background-color: #ededed;
    --button-text-color: #757575; }
  .button_light_disabled {
    --button-border-color: var(--default-disabled-grey-color);
    --button-text-color: var(--default-disabled-grey-color);
    --icon-fill-color: var(--default-disabled-grey-color); }
  .button_light_success {
    --button-border-color: var(--default-green-color);
    --button-text-color: var(--default-green-color);
    --icon-fill-color: var(--default-green-color); }
    .button_light_success:hover {
      --button-background-color: #f8fff6;
      --button-border-color: #25a007;
      --button-text-color: #25a007;
      --icon-fill-color: #25a007; }
    .button_light_success:active {
      --button-background-color: #E4FDDE;
      --button-border-color: var(--default-green-color);
      --button-text-color: var(--default-green-color);
      --icon-fill-color: var(--default-green-color); }
  .button_light_danger {
    --button-border-color: var(--default-red-color);
    --button-text-color: var(--default-red-color);
    --icon-fill-color: var(--default-red-color); }
    .button_light_danger:hover {
      --button-background-color: #fff2f2;
      --button-border-color: var(--default-red-color);
      --button-text-color: var(--default-red-color);
      --icon-fill-color: var(--default-red-color); }
    .button_light_danger:active {
      --button-background-color: #ffcaca;
      --button-border-color: var(--default-red-color);
      --button-text-color: var(--default-red-color);
      --icon-fill-color: var(--default-red-color); }
  .button_light_secondary {
    --button-border-color: var(--default-disabled-grey-color);
    --button-text-color: var(--default-disabled-grey-color);
    --icon-fill-color: var(--default-disabled-grey-color); }
    .button_light_secondary:hover {
      --button-border-color: #818181;
      --button-text-color: #818181;
      --icon-fill-color: #818181; }
    .button_light_secondary:active {
      --button-background-color: #f2f2f2;
      --button-border-color: var(--default-color);
      --button-text-color: var(--default-color);
      --icon-fill-color: var(--default-color); }
  .button_with_icon {
    --button-padding-right: 10px;
    --button-gap: 10px;
    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;
    gap: var(--button-gap); }
  .button_icon_arrow svg {
    --icon-width: 10px;
    --icon-height: 7px; }
  .button_icon_cart svg {
    --icon-width: 17px;
    --icon-height: 17px; }
  .button_icon_lock svg {
    --icon-width: 12px;
    --icon-height: 15px; }
  .button_icon_back svg {
    --icon-width: 15px;
    --icon-height: 16px; }
  .button_icon_file svg {
    --icon-width: 15px;
    --icon-height: 15px; }
  .button_icon_pencil svg {
    --icon-width: 14px;
    --icon-height: 15px; }
  .button_icon_trash svg {
    --icon-width: 15px;
    --icon-height: 16px; }
  .button_icon_headphones svg {
    --icon-width: 16px;
    --icon-height: 17px; }
  .button_no_border {
    border: none; }
  .button_no_title {
    padding: 0; }
  .button_link {
    padding: 0;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    text-transform: none; }
  .button_width_full {
    width: 100%; }