/* WorkTop.League icon system - replacement for FontAwesome.
   Pattern mirrors WorkTop/wwwroot/css/icon.css: mask-image SVG colored via currentColor. */

.wt-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    vertical-align: -0.125em;
}

.wt-icon--xs {
    width: 0.75rem;
    height: 0.75rem;
}

.wt-icon--sm {
    width: 0.875rem;
    height: 0.875rem;
}

.wt-icon--lg {
    width: 1.25rem;
    height: 1.25rem;
}

/* UI icons */
.wt-icon--chevron-left {
    mask-image: url("../images/icons/chevron-left.svg");
    -webkit-mask-image: url("../images/icons/chevron-left.svg");
}

.wt-icon--chevron-right {
    mask-image: url("../images/icons/chevron-right.svg");
    -webkit-mask-image: url("../images/icons/chevron-right.svg");
}

.wt-icon--play {
    mask-image: url("../images/icons/play.svg");
    -webkit-mask-image: url("../images/icons/play.svg");
}

.wt-icon--plus {
    mask-image: url("../images/icons/plus.svg");
    -webkit-mask-image: url("../images/icons/plus.svg");
}

.wt-icon--search {
    mask-image: url("../images/icons/search.svg");
    -webkit-mask-image: url("../images/icons/search.svg");
}

.wt-icon--rotate-left {
    mask-image: url("../images/icons/rotate-left.svg");
    -webkit-mask-image: url("../images/icons/rotate-left.svg");
}

.wt-icon--arrow-left {
    mask-image: url("../images/icons/arrow-left.svg");
    -webkit-mask-image: url("../images/icons/arrow-left.svg");
}

.wt-icon--arrow-right {
    mask-image: url("../images/icons/arrow-right.svg");
    -webkit-mask-image: url("../images/icons/arrow-right.svg");
}

.wt-icon--stopwatch {
    mask-image: url("../images/icons/stopwatch.svg");
    -webkit-mask-image: url("../images/icons/stopwatch.svg");
}

.wt-icon--hashtag {
    mask-image: url("../images/icons/hashtag.svg");
    -webkit-mask-image: url("../images/icons/hashtag.svg");
}

.wt-icon--bars {
    mask-image: url("../images/icons/bars.svg");
    -webkit-mask-image: url("../images/icons/bars.svg");
}

.wt-icon--house {
    mask-image: url("../images/icons/house.svg");
    -webkit-mask-image: url("../images/icons/house.svg");
}

.wt-icon--xmark {
    mask-image: url("../images/icons/xmark.svg");
    -webkit-mask-image: url("../images/icons/xmark.svg");
}

/* Brand icons */
.wt-icon--facebook {
    mask-image: url("../images/icons/facebook.svg");
    -webkit-mask-image: url("../images/icons/facebook.svg");
}

.wt-icon--twitter {
    mask-image: url("../images/icons/twitter.svg");
    -webkit-mask-image: url("../images/icons/twitter.svg");
}

.wt-icon--instagram {
    mask-image: url("../images/icons/instagram.svg");
    -webkit-mask-image: url("../images/icons/instagram.svg");
}

.wt-icon--youtube {
    mask-image: url("../images/icons/youtube.svg");
    -webkit-mask-image: url("../images/icons/youtube.svg");
}

.wt-icon--pinterest {
    mask-image: url("../images/icons/pinterest.svg");
    -webkit-mask-image: url("../images/icons/pinterest.svg");
}

.wt-icon--google {
    mask-image: url("../images/icons/google.svg");
    -webkit-mask-image: url("../images/icons/google.svg");
}

/* Toolbar / editor icons (used by .razor DevExpress components) */
.wt-icon--file-video { mask-image: url("../images/icons/file-video.svg"); -webkit-mask-image: url("../images/icons/file-video.svg"); }
.wt-icon--trash-can { mask-image: url("../images/icons/trash-can.svg"); -webkit-mask-image: url("../images/icons/trash-can.svg"); }
.wt-icon--floppy-disk { mask-image: url("../images/icons/floppy-disk.svg"); -webkit-mask-image: url("../images/icons/floppy-disk.svg"); }
.wt-icon--video { mask-image: url("../images/icons/video.svg"); -webkit-mask-image: url("../images/icons/video.svg"); }
.wt-icon--circle-info { mask-image: url("../images/icons/circle-info.svg"); -webkit-mask-image: url("../images/icons/circle-info.svg"); }
.wt-icon--globe { mask-image: url("../images/icons/globe.svg"); -webkit-mask-image: url("../images/icons/globe.svg"); }
.wt-icon--cloud-arrow-down { mask-image: url("../images/icons/cloud-arrow-down.svg"); -webkit-mask-image: url("../images/icons/cloud-arrow-down.svg"); }
.wt-icon--at { mask-image: url("../images/icons/at.svg"); -webkit-mask-image: url("../images/icons/at.svg"); }
.wt-icon--check-double { mask-image: url("../images/icons/check-double.svg"); -webkit-mask-image: url("../images/icons/check-double.svg"); }
.wt-icon--calculator { mask-image: url("../images/icons/calculator.svg"); -webkit-mask-image: url("../images/icons/calculator.svg"); }
.wt-icon--file-excel { mask-image: url("../images/icons/file-excel.svg"); -webkit-mask-image: url("../images/icons/file-excel.svg"); }
.wt-icon--user-plus { mask-image: url("../images/icons/user-plus.svg"); -webkit-mask-image: url("../images/icons/user-plus.svg"); }
.wt-icon--lock { mask-image: url("../images/icons/lock.svg"); -webkit-mask-image: url("../images/icons/lock.svg"); }
.wt-icon--lock-open { mask-image: url("../images/icons/lock-open.svg"); -webkit-mask-image: url("../images/icons/lock-open.svg"); }

/* Admin menu icons (used by MenuExtension.cs for the Blazor Server backend). */
.wt-icon--clock-rotate-left { mask-image: url("../images/icons/clock-rotate-left.svg"); -webkit-mask-image: url("../images/icons/clock-rotate-left.svg"); }
.wt-icon--rectangle-list { mask-image: url("../images/icons/rectangle-list.svg"); -webkit-mask-image: url("../images/icons/rectangle-list.svg"); }
.wt-icon--calendar-check { mask-image: url("../images/icons/calendar-check.svg"); -webkit-mask-image: url("../images/icons/calendar-check.svg"); }
.wt-icon--chart-bar { mask-image: url("../images/icons/chart-bar.svg"); -webkit-mask-image: url("../images/icons/chart-bar.svg"); }
.wt-icon--table-cells { mask-image: url("../images/icons/table-cells.svg"); -webkit-mask-image: url("../images/icons/table-cells.svg"); }
.wt-icon--diagram-project { mask-image: url("../images/icons/diagram-project.svg"); -webkit-mask-image: url("../images/icons/diagram-project.svg"); }
.wt-icon--bolt { mask-image: url("../images/icons/bolt.svg"); -webkit-mask-image: url("../images/icons/bolt.svg"); }
.wt-icon--hexagon-bolt { mask-image: url("../images/icons/hexagon-bolt.svg"); -webkit-mask-image: url("../images/icons/hexagon-bolt.svg"); }
.wt-icon--rectangle-ad { mask-image: url("../images/icons/rectangle-ad.svg"); -webkit-mask-image: url("../images/icons/rectangle-ad.svg"); }
.wt-icon--newspaper { mask-image: url("../images/icons/newspaper.svg"); -webkit-mask-image: url("../images/icons/newspaper.svg"); }
.wt-icon--envelopes-bulk { mask-image: url("../images/icons/envelopes-bulk.svg"); -webkit-mask-image: url("../images/icons/envelopes-bulk.svg"); }
.wt-icon--address-book { mask-image: url("../images/icons/address-book.svg"); -webkit-mask-image: url("../images/icons/address-book.svg"); }
.wt-icon--hockey-puck { mask-image: url("../images/icons/hockey-puck.svg"); -webkit-mask-image: url("../images/icons/hockey-puck.svg"); }
.wt-icon--star { mask-image: url("../images/icons/star.svg"); -webkit-mask-image: url("../images/icons/star.svg"); }
.wt-icon--user { mask-image: url("../images/icons/user.svg"); -webkit-mask-image: url("../images/icons/user.svg"); }
.wt-icon--person-skating { mask-image: url("../images/icons/person-skating.svg"); -webkit-mask-image: url("../images/icons/person-skating.svg"); }
.wt-icon--person-walking { mask-image: url("../images/icons/person-walking.svg"); -webkit-mask-image: url("../images/icons/person-walking.svg"); }
.wt-icon--people-arrows { mask-image: url("../images/icons/people-arrows.svg"); -webkit-mask-image: url("../images/icons/people-arrows.svg"); }
.wt-icon--person-through-window { mask-image: url("../images/icons/person-through-window.svg"); -webkit-mask-image: url("../images/icons/person-through-window.svg"); }
.wt-icon--person-arrow-right { mask-image: url("../images/icons/person-arrow-right.svg"); -webkit-mask-image: url("../images/icons/person-arrow-right.svg"); }
.wt-icon--screwdriver-wrench { mask-image: url("../images/icons/screwdriver-wrench.svg"); -webkit-mask-image: url("../images/icons/screwdriver-wrench.svg"); }
.wt-icon--sliders { mask-image: url("../images/icons/sliders.svg"); -webkit-mask-image: url("../images/icons/sliders.svg"); }
.wt-icon--trophy { mask-image: url("../images/icons/trophy.svg"); -webkit-mask-image: url("../images/icons/trophy.svg"); }
.wt-icon--cloud-sun { mask-image: url("../images/icons/cloud-sun.svg"); -webkit-mask-image: url("../images/icons/cloud-sun.svg"); }
.wt-icon--people-group { mask-image: url("../images/icons/people-group.svg"); -webkit-mask-image: url("../images/icons/people-group.svg"); }
.wt-icon--headphones { mask-image: url("../images/icons/headphones.svg"); -webkit-mask-image: url("../images/icons/headphones.svg"); }
.wt-icon--cubes-stacked { mask-image: url("../images/icons/cubes-stacked.svg"); -webkit-mask-image: url("../images/icons/cubes-stacked.svg"); }
.wt-icon--user-secret { mask-image: url("../images/icons/user-secret.svg"); -webkit-mask-image: url("../images/icons/user-secret.svg"); }
.wt-icon--address-card { mask-image: url("../images/icons/address-card.svg"); -webkit-mask-image: url("../images/icons/address-card.svg"); }
.wt-icon--handshake { mask-image: url("../images/icons/handshake.svg"); -webkit-mask-image: url("../images/icons/handshake.svg"); }
.wt-icon--clipboard-user { mask-image: url("../images/icons/clipboard-user.svg"); -webkit-mask-image: url("../images/icons/clipboard-user.svg"); }
.wt-icon--fire { mask-image: url("../images/icons/fire.svg"); -webkit-mask-image: url("../images/icons/fire.svg"); }
.wt-icon--gear { mask-image: url("../images/icons/gear.svg"); -webkit-mask-image: url("../images/icons/gear.svg"); }

/* Header/top-bar icons (used by shared Manager.Web.DevEx WtToolbarDisplay):
   hamburger toggler, logo, theme, login/logout, my details, company, internet. */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    background-color: transparent !important;
    background-repeat: no-repeat;
    background-position: center;
    height: 1.5rem;
    width: 1.5rem;
    display: inline-block;
}
.logo-worktop-image {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: currentColor;
    mask-image: url("../images/WorkTop-xs.svg");
    -webkit-mask-image: url("../images/WorkTop-xs.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    cursor: pointer;
}
.work-theme-icon,
.work-login-icon,
.work-logout-icon,
.work-mydetail-icon,
.work-company-icon,
.work-internet-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
.work-theme-icon    { mask-image: url("../images/theme.svg");     -webkit-mask-image: url("../images/theme.svg"); }
.work-login-icon    { mask-image: url("../images/Login.svg");     -webkit-mask-image: url("../images/Login.svg"); }
.work-logout-icon   { mask-image: url("../images/Logout.svg");    -webkit-mask-image: url("../images/Logout.svg"); }
.work-mydetail-icon { mask-image: url("../images/MyDetails.svg"); -webkit-mask-image: url("../images/MyDetails.svg"); }
.work-company-icon  { mask-image: url("../images/Company.svg");   -webkit-mask-image: url("../images/Company.svg"); }
.work-internet-icon { mask-image: url("../images/Internet.svg");  -webkit-mask-image: url("../images/Internet.svg"); }

/* Compatibility shims: match the original FontAwesome positioning that style-hockey.css
   applied to .fa/.fas/.fab inside themed icon wrappers. */
.btn-social-counter__icon .wt-icon {
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    vertical-align: baseline;
}

.social-links__icon .wt-icon,
.social-links__link .wt-icon {
    vertical-align: middle;
}

/* Center icons inside .social-links--btn pills (26x26 / 32x32 colored squares).
   Scoped with :not(.social-links--btn-plus) so the footer btn-plus layout
   (icon + label + chevron square) keeps its own flex-start layout. */
.social-links--btn:not(.social-links--btn-plus) .social-links__link {
    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;
}

.social-links--btn:not(.social-links--btn-plus) .social-links__link .wt-icon {
    width: 14px;
    height: 14px;
    margin: 0;
}

.social-links--btn:not(.social-links--btn-plus) .social-links__link--lg .wt-icon {
    width: 16px;
    height: 16px;
}

/* Footer btn-plus pill: <span class="wt-icon"> as direct child of the link
   replaces the original `> i`. Restore right-side gap to the label and the
   rotate-on-hover trick on the chevron square. */
.social-links--btn-plus .social-links__link > .wt-icon {
    margin-right: 0.67em;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

.social-links--btn-plus .social-links__icon > .wt-icon {
    position: relative;
    width: 1em;
    height: 1em;
    -webkit-transition: -webkit-transform 0.2s ease-in;
    transition: -webkit-transform 0.2s ease-in;
    transition: transform 0.2s ease-in;
    transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
}

.social-links--btn-plus .social-links__link:hover .social-links__icon > .wt-icon {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
}

/* Top-bar and main-nav social icons (no colored background, smaller). */
.social-links--top-bar .social-links__link .wt-icon,
.social-links--main-nav .social-links__link .wt-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* .btn-icon used to rely on `.btn-icon i { margin-right: .5em }`. Restore the gap
   for our span-based icons (and the right-aligned variant). */
.btn-icon .wt-icon {
    margin-right: 0.5em;
    vertical-align: middle;
}

.btn-icon-right .wt-icon {
    margin-right: 0;
    margin-left: 10px;
    vertical-align: middle;
}

.btn-single-icon .wt-icon {
    margin: 0;
}

/* Toolbar editor icons (.edit-*-icon) — used by shared Manager.Web.DevEx toolbars
   (ManagerEditToolbar, ManagerGridToolbar, WtDataAgendButton). Mirrors the rules
   from WorkTop\wwwroot\css\icon.css but with images served from the League app. */
.edit-new-icon,
.edit-edit-icon,
.edit-delete-icon,
.edit-close-icon,
.edit-filter-icon,
.edit-group-icon,
.edit-search-icon,
.edit-print-icon,
.edit-column-icon,
.edit-save-icon,
.edit-import-icon,
.edit-email-icon {
    display: inline-block;
    width: 1.4rem;
    height: 1.4rem;
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}
.edit-new-icon    { mask-image: url("../images/editor/New.svg");    -webkit-mask-image: url("../images/editor/New.svg"); }
.edit-edit-icon   { mask-image: url("../images/editor/Edit.svg");   -webkit-mask-image: url("../images/editor/Edit.svg"); }
.edit-delete-icon { mask-image: url("../images/editor/Delete.svg"); -webkit-mask-image: url("../images/editor/Delete.svg"); }
.edit-close-icon  { mask-image: url("../images/editor/Close.svg");  -webkit-mask-image: url("../images/editor/Close.svg"); }
.edit-filter-icon { mask-image: url("../images/editor/Filter.svg"); -webkit-mask-image: url("../images/editor/Filter.svg"); }
.edit-group-icon  { mask-image: url("../images/editor/Group.svg");  -webkit-mask-image: url("../images/editor/Group.svg"); }
.edit-search-icon { mask-image: url("../images/icons/search.svg");  -webkit-mask-image: url("../images/icons/search.svg"); }
.edit-print-icon  { mask-image: url("../images/editor/Print.svg");  -webkit-mask-image: url("../images/editor/Print.svg"); }
.edit-column-icon { mask-image: url("../images/editor/Column.svg"); -webkit-mask-image: url("../images/editor/Column.svg"); }
.edit-save-icon   { mask-image: url("../images/editor/Save.svg");   -webkit-mask-image: url("../images/editor/Save.svg"); }
.edit-import-icon { mask-image: url("../images/editor/Import.svg"); -webkit-mask-image: url("../images/editor/Import.svg"); }
.edit-email-icon  { mask-image: url("../images/editor/Email.svg");  -webkit-mask-image: url("../images/editor/Email.svg"); }

/* Block-style brand login buttons (.btn-facebook/.btn-google with .btn-block):
   make the button center the icon + label horizontally. */
.btn-icon.btn-block {
    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;
    width: 100%;
}