:root {
  --lf-icons-sheet-width: 512px;
  --lf-icons-sheet-height: 408px;
}

.lf-icon {
  display: inline-block;
  flex: 0 0 auto;
  background-image: url('./landforge_icons_spritesheet.png');
  background-repeat: no-repeat;
  vertical-align: middle;
}

.lf-icon--logo-crest {
  width: 66px;
  height: 73px;
  background-position: -8px -8px;
}

.lf-icon--top-status-shield {
  width: 44px;
  height: 50px;
  background-position: -82px -8px;
}

.lf-icon--top-eye {
  width: 36px;
  height: 27px;
  background-position: -134px -8px;
}

.lf-icon--top-publish-crown {
  width: 42px;
  height: 43px;
  background-position: -178px -8px;
}

.lf-icon--top-bell {
  width: 51px;
  height: 55px;
  background-position: -228px -8px;
}

.lf-icon--top-profile-crest {
  width: 66px;
  height: 68px;
  background-position: -287px -8px;
}

.lf-icon--home {
  width: 31px;
  height: 31px;
  background-position: -361px -8px;
}

.lf-icon--pages {
  width: 29px;
  height: 31px;
  background-position: -400px -8px;
}

.lf-icon--blocks {
  width: 31px;
  height: 30px;
  background-position: -437px -8px;
}

.lf-icon--media {
  width: 31px;
  height: 31px;
  background-position: -8px -89px;
}

.lf-icon--navigation {
  width: 31px;
  height: 29px;
  background-position: -47px -89px;
}

.lf-icon--patch-notes {
  width: 30px;
  height: 31px;
  background-position: -86px -89px;
}

.lf-icon--faq {
  width: 31px;
  height: 31px;
  background-position: -124px -89px;
}

.lf-icon--forum {
  width: 31px;
  height: 27px;
  background-position: -163px -89px;
}

.lf-icon--music {
  width: 31px;
  height: 30px;
  background-position: -202px -89px;
}

.lf-icon--users {
  width: 30px;
  height: 30px;
  background-position: -241px -89px;
}

.lf-icon--testers {
  width: 31px;
  height: 31px;
  background-position: -279px -89px;
}

.lf-icon--settings {
  width: 31px;
  height: 30px;
  background-position: -318px -89px;
}

.lf-icon--system {
  width: 31px;
  height: 30px;
  background-position: -357px -89px;
}

.lf-icon--audit {
  width: 31px;
  height: 29px;
  background-position: -396px -89px;
}

.lf-icon--card-books {
  width: 78px;
  height: 79px;
  background-position: -8px -128px;
}

.lf-icon--card-scroll {
  width: 78px;
  height: 79px;
  background-position: -94px -128px;
}

.lf-icon--card-media {
  width: 78px;
  height: 79px;
  background-position: -180px -128px;
}

.lf-icon--card-swords {
  width: 78px;
  height: 79px;
  background-position: -266px -128px;
}

.lf-icon--card-user {
  width: 78px;
  height: 78px;
  background-position: -352px -128px;
}

.lf-icon--card-patch {
  width: 78px;
  height: 78px;
  background-position: -8px -215px;
}

.lf-icon--card-shield {
  width: 78px;
  height: 78px;
  background-position: -94px -215px;
}

.lf-icon--card-chest {
  width: 78px;
  height: 78px;
  background-position: -180px -215px;
}

.lf-icon--quick-new-page {
  width: 53px;
  height: 55px;
  background-position: -266px -215px;
}

.lf-icon--quick-upload {
  width: 60px;
  height: 51px;
  background-position: -327px -215px;
}

.lf-icon--quick-patch {
  width: 58px;
  height: 63px;
  background-position: -395px -215px;
}

.lf-icon--quick-users {
  width: 56px;
  height: 50px;
  background-position: -8px -301px;
}

.lf-icon--quick-settings {
  width: 54px;
  height: 57px;
  background-position: -72px -301px;
}

.lf-icon--recent-book-badge {
  width: 47px;
  height: 46px;
  background-position: -134px -301px;
}

.lf-icon--recent-scroll-badge {
  width: 47px;
  height: 46px;
  background-position: -189px -301px;
}

.lf-icon--recent-media-badge {
  width: 47px;
  height: 45px;
  background-position: -244px -301px;
}

.lf-icon--recent-faq-badge {
  width: 47px;
  height: 46px;
  background-position: -299px -301px;
}

.lf-icon--recent-swords-badge {
  width: 47px;
  height: 46px;
  background-position: -354px -301px;
}

.lf-icon--warning {
  width: 36px;
  height: 34px;
  background-position: -409px -301px;
}

.lf-icon--info {
  width: 36px;
  height: 34px;
  background-position: -453px -301px;
}

.lf-icon--success {
  width: 36px;
  height: 34px;
  background-position: -8px -366px;
}

.lf-icon--bottom-crown {
  width: 34px;
  height: 32px;
  background-position: -52px -366px;
}

/*
Frames are supplied individually because CSS border-image cannot select
a sub-rectangle from a spritesheet reliably. The frame spritesheet is
included for engines/canvases and build pipelines.
*/

.lf-frame {
  position: relative;
  background: rgba(10, 14, 14, 0.92);
  border-style: solid;
  border-width: 12px;
  border-image-slice: 12 fill;
  border-image-repeat: stretch;
}

.lf-frame--stat-card {
  border-image-source: url('./frames/frame_stat_card.png');
  border-width: 9px;
  border-image-slice: 9;
}

.lf-frame--side-panel {
  border-image-source: url('./frames/frame_side_panel.png');
  border-width: 14px;
  border-image-slice: 14;
}

.lf-frame--wide-panel {
  border-image-source: url('./frames/frame_quick_panel.png');
  border-width: 12px;
  border-image-slice: 12;
}

.lf-frame--nav-active {
  border-image-source: url('./frames/frame_nav_active.png');
  border-width: 12px;
  border-image-slice: 12;
}

/* AP223 additional frame mappings */
.lf-frame--warning-panel {
  border-image-source: url('./frames/frame_warning_panel.png');
  border-width: 14px;
  border-image-slice: 14;
}
.lf-frame--quick-panel {
  border-image-source: url('./frames/frame_quick_panel.png');
  border-width: 12px;
  border-image-slice: 12;
}
.lf-frame--module-panel {
  border-image-source: url('./frames/frame_module_panel.png');
  border-width: 13px;
  border-image-slice: 13;
}