/*
 * Fenix Legacy compatibility for TUniFSButton and TUniFSMenuButton.
 * Extracted from the original Fenix button stylesheet and isolated from
 * Falcon's fs-btn classes so existing applications keep their current look.
 */

.fa-sf-16 { font-size: 16px !important; }
.fa-sf-20 { font-size: 20px !important; }
.fa-sf-24 { font-size: 24px !important; }
.fa-sf-32 { font-size: 32px !important; }
.fa-sf-40 { font-size: 40px !important; }
.fa-sf-48 { font-size: 48px !important; }
.fa-sf-64 { font-size: 64px !important; }

.f-btn,
.f-btn-success {
  background-image: none !important;
}

.f-btn {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid;
  outline: none;
  border-radius: 2px;
  transition: background-color .3s;
}

.f-btn > * { position: relative; }
.f-btn .x-btn-inner { color: inherit !important; }
.f-btn .x-btn-icon-el {
  height: 1em !important;
  line-height: 1em !important;
}

.fs-btn .x-btn-icon-el {
  height: 1em !important;
  line-height: 1em !important;
}

/* Font Awesome Free does not ship Light or Duotone webfonts. These classes
   are added at runtime only when the corresponding Pro font is unavailable. */
.fa-sf-light-fallback {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  opacity: .62;
}

.fa-sf-duotone-fallback {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
}

.f-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 0;
  padding-top: 0;
  border-radius: 100%;
  background-color: rgba(236, 240, 241, .3);
  transform: translate(-50%, -50%);
}

.f-btn:active::before {
  width: 120%;
  padding-top: 120%;
  transition: width .2s ease-out, padding-top .2s ease-out;
  box-shadow: none !important;
}

.f-btn:active,
.f-btn.active { box-shadow: none !important; }
.f-btn:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

.f-btn.disabled,
.f-btn[disabled],
fieldset[disabled] .f-btn {
  cursor: not-allowed !important;
  filter: alpha(opacity=65) !important;
  box-shadow: none !important;
  opacity: .65 !important;
}

.f-btn-default { color: #7a878e !important; background-color: #fff !important; border-color: rgba(0, 0, 0, .07) !important; }
.f-btn-default:focus, .f-btn-default:hover { background-color: #ededed !important; }
.f-btn-primary { color: #fff !important; background-color: #337ab7 !important; border-color: #2e6da4 !important; }
.f-btn-primary:focus, .f-btn-primary:hover { background-color: #286090 !important; border-color: #204d74 !important; }
.f-btn-info { color: #fff !important; background-color: #0ab1fc !important; border-color: #03a9f4 !important; }
.f-btn-info:focus, .f-btn-info:hover { background-color: #0391d1 !important; border-color: #0391d1 !important; }
.f-btn-success { color: #fff !important; background-color: #92c755 !important; border-color: #8bc34a !important; }
.f-btn-success:focus, .f-btn-success:hover { background-color: #7daa50 !important; border-color: #79af3a !important; }
.f-btn-mint { color: #fff !important; background-color: #29b2a6 !important; border-color: #26a69a !important; }
.f-btn-mint:focus, .f-btn-mint:hover { background-color: #1f897f !important; border-color: #1f897f !important; }
.f-btn-warning { color: #fff !important; background-color: #ffb80f !important; border-color: #ffb300 !important; }
.f-btn-warning:focus, .f-btn-warning:hover { background-color: #db9a00 !important; border-color: #db9a00 !important; }
.f-btn-danger { color: #fff !important; background-color: #f55145 !important; border-color: #f44336 !important; }
.f-btn-danger:focus, .f-btn-danger:hover { background-color: #f22314 !important; border-color: #f22314 !important; }
.f-btn-pink { color: #fff !important; background-color: #f1709c !important; border-color: #f06292 !important; }
.f-btn-pink:focus, .f-btn-pink:hover { background-color: #ed417b !important; border-color: #ed417b !important; }
.f-btn-purple { color: #fff !important; background-color: #b052c0 !important; border-color: #ab47bc !important; }
.f-btn-purple:focus, .f-btn-purple:hover { background-color: #953ca4 !important; border-color: #953ca4 !important; }
.f-btn-inverse { color: #fff !important; background-color: #414c57 !important; border-color: #3a444e !important; }
.f-btn-inverse:focus, .f-btn-inverse:hover { background-color: #2b323a !important; border-color: #2b323a !important; }
.f-btn-transparent { color: #7a878e !important; background-color: transparent !important; border-color: transparent !important; }
.f-btn-transparent:focus, .f-btn-transparent:hover { background-color: transparent !important; border-color: transparent !important; }
.f-btn-grey { color: #fff !important; background-color: #848484 !important; border-color: #656565 !important; }
.f-btn-grey:focus, .f-btn-grey:hover { background-color: #696969 !important; border-color: #656565 !important; }
.f-btn-light { color: #fff !important; background-color: #e6e6e6 !important; border-color: #e1e1e1 !important; }
.f-btn-light:focus, .f-btn-light:hover { background-color: #cacaca !important; border-color: #e1e1e1 !important; }
.f-btn-yellow { color: #fff !important; background-color: #fee292 !important; border-color: #fcd661 !important; }
.f-btn-yellow:focus, .f-btn-yellow:hover { background-color: #fcd76a !important; border-color: #fcd661 !important; }

.fa-sf-white { color: #fff; }
.fa-sf-primary { color: #428bca; }
.fa-sf-info { color: #6fb3e0; }
.fa-sf-success { color: #87b87f; }
.fa-sf-warning { color: #ffb752; }
.fa-sf-danger { color: #d15b47; }
.fa-sf-inverse { color: #555; }
.fa-sf-pink { color: #d6487e; }
.fa-sf-purple { color: #9585bf; }
.fa-sf-yellow { color: #fee188; }
.fa-sf-grey { color: #a0a0a0; }
.fa-sf-light { color: #e7e7e7; }