:focus, :active, ::-moz-focus-inner {
  outline: 0 !important;
}
:root :where(.is-layout-flex) {
  gap: 0.5em;
}

button,
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
.btn::-moz-focus-inner {
  border: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  padding: 7px;

  &:focus {
    outline: 0 !important;
  }
}

button,
input[type="submit"],
input[type="button"],
.btn {
  @extend %buttons-box-shadow-cubic-bezier;
  position: relative;
  margin: 10px 1px;
  padding: 12px 30px;
  border: none;
  border-radius: 3px;
  white-space: normal;
  letter-spacing: 0;
  text-transform: uppercase;
}

input[type="number"] {
  padding: 0;
}

button,
input[type="submit"],
input[type="button"],
.btn,
.btn.btn-default {
  @include buttons-box-shadow($color-body-text);
}

button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="button"]:active,
.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus,
.btn:active:hover,
.btn.active:focus,
.btn.active:hover,
.open > .btn.dropdown-toggle,
.open > .btn.dropdown-toggle:focus,
.open > .btn.dropdown-toggle:hover,
.btn.btn-default,
.btn.btn-default:hover,
.btn.btn-default:focus,
.btn.btn-default:active,
.btn.btn-default.active,
.btn.btn-default:active:focus,
.btn.btn-default:active:hover,
.btn.btn-default.active:focus,
.btn.btn-default.active:hover,
.open > .btn.btn-default.dropdown-toggle,
.open > .btn.btn-default.dropdown-toggle:focus,
.open > .btn.btn-default.dropdown-toggle:hover {
  color: #fff;
  background-color: $color-body-text;
  outline: none;
}

.btn > a:hover,
.btn > a:focus,
.btn > a:active,
.btn:hover > a,
.btn:focus > a,
.btn:active > a {
  color: #fff;
}

.btn.disabled,
.btn.disabled:hover,
.btn.disabled:focus,
.btn.disabled.focus,
.btn.disabled:active,
.btn.disabled.active,
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:focus,
.btn:disabled.focus,
.btn:disabled:active,
.btn:disabled.active,
.btn[disabled],
.btn[disabled]:hover,
.btn[disabled]:focus,
.btn[disabled].focus,
.btn[disabled]:active,
.btn[disabled].active,
fieldset[disabled] .btn,
fieldset[disabled] .btn:hover,
fieldset[disabled] .btn:focus,
fieldset[disabled] .btn.focus,
fieldset[disabled] .btn:active,
fieldset[disabled] .btn.active {
  @extend %buttons-box-shadow-none;
}

.btn.btn-simple,
.btn.btn-default.btn-simple {
  @extend %buttons-box-shadow-none;
}

.btn,
.btn.btn-default {
  &.btn-simple, &.btn-simple:hover, &.btn-simple:focus, &.btn-simple:active {
    color: $color-body-text;
    background-color: transparent;
  }
}

button, input[type="submit"], input[type="button"], .btn.btn-primary {
  @include buttons-box-shadow($color-primary);
}

.btn.btn-primary.btn-simple {
  @extend %buttons-box-shadow-none;
}

.btn.btn-primary {
  &.btn-simple, &.btn-simple:hover, &.btn-simple:focus, &.btn-simple:active {
    color: $color-primary;
    background-color: transparent;
  }
}

button,
button:hover,
input[type="submit"],
input[type="submit"]:hover,
input[type="button"],
input[type="button"]:hover,
input#searchsubmit,
.btn.btn-primary,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active,
.btn.btn-primary:active:focus,
.btn.btn-primary:active:hover,
.btn.btn-primary.active:focus,
.btn.btn-primary.active:hover,
.open > .btn.btn-primary.dropdown-toggle,
.open > .btn.btn-primary.dropdown-toggle:focus,
.open > .btn.btn-primary.dropdown-toggle:hover {
  color: #fff;
  background-color: $color-primary;
}

.btn {
  &.btn-white {
    box-shadow: 0 2px 2px 0 rgba(153,153,153,.14), 0 3px 1px -2px rgba(153,153,153,.2), 0 1px 5px 0 rgba(153,153,153,.12);
    color: #999999;
    background-color: #fff;
    &.btn-white:focus, &.btn-white:hover {
      color: #fff;
      background-color: rgba(153, 153, 153, 0.6);
    }
    &.btn-simple {
      color: #fff;
      background: transparent;
      @extend %buttons-box-shadow-none;
    }
  }

  &.btn-round {
    border-radius: 30px;
  }

  &:not(.btn-just-icon):not(.btn-fab) i {
    position: relative;
  }

  &.btn-just-icon {
    padding: 12px;

    &:hover {
      box-shadow: none;
    }

    i {
      width: 20px;
    }

    &.btn-lg {
      padding: 13px 18px;
    }
  }

  &.btn-border {
    @extend %buttons-box-shadow-none;
    @extend %transition-all-3s-ease;

    background: transparent;
    border: 1px solid #d2d2d2;
    color: $color-body-text;

    &:hover,
    &:focus {
      @extend %buttons-box-shadow-none;
      background: transparent;
      color: $color-secondary;
    }
  }
}

.btn i {
  position: relative;
  top: -1px;
  vertical-align: middle;
}

.navbar {
  button.navbar-toggle, button.navbar-toggle:hover {
    @extend %buttons-box-shadow-none;
    color: #555;
  }

  .button {
    &:hover {
      box-shadow: none !important;
      color: $color-rose;
    }
  }
}

.navbar .dropdown-menu li.btn:hover > a,
.navbar .dropdown-menu li.btn:focus > a,
.navbar .dropdown-menu li.btn:active > a {
  color: #ffffff !important;
}

// Generate for each social network specific buttons code
@each $current-social in $social-networks {
  $i: index($social-networks, $current-social);
  @include buttons-social-icon($current-social,nth($social-networks-colors,$i));
}

body [class*="fl-builder"] button,
body [class*="fl-builder"] button:hover,
button.customize-partial-edit-shortcut-button,
button.customize-partial-edit-shortcut-button:hover {
  box-shadow: none !important;
}