/* ==========================================================================
   Pradco Toolkit Blazor Maps — Sprite Sheets
   
   Usage: apply the base class + an individual position class to an element.
   Example: <span class="pradco-sprite-icon close_high"></span>
   
   All PNGs are exported at 4× resolution. Each base class sets
   background-size to scale the image back to 1× display coordinates.
   
   Sprite sheets:
     - Icons             → wwwroot/images/sprites/icons.png            (24×24px display)
     - Drawing Styles    → wwwroot/images/sprites/drawing-styles.png   (48×48px display)
     - Selection States  → wwwroot/images/sprites/selection-states.png (40×40px display)
     - Base Maps         → wwwroot/images/sprites/base-maps.png        (88×88px display)
   ========================================================================== */


/* ==========================================================================
   Icons — icons.png  (1632×1504 native → 408×376 display)
   Base class: .pradco-sprite-icon
   ========================================================================== */

.pradco-sprite-icon {
    background: url('../images/sprites/icons.png') no-repeat;
    background-size: 408px 376px;
    width: 24px;
    height: 24px;
    display: inline-block;
}

/* Row 0 */
.add_location_pin_high     { background-position: 0 0; }
.add_location_pin-low      { background-position: -32px 0; }
.add_location_pin_highest  { background-position: -64px 0; }
.add_location_pin-primary80{ background-position: -96px 0; }
.add-to-folder_highest     { background-position: -128px 0; }
.add-to-folder-primary80   { background-position: -160px 0; }
.add-to-folder-low         { background-position: -192px 0; }
.add_to_folder_high        { background-position: -224px 0; }
.arrow_back_high           { background-position: -256px 0; }
.arrow_back-low            { background-position: -288px 0; }
.arrow_back-primary80      { background-position: -320px 0; }
.arrow_back_highest        { background-position: -352px 0; }
.calendar-primary80        { background-position: -384px 0; }
/* Row 1 */
.calendar-low              { background-position: 0 -32px; }
.calendar_high             { background-position: -32px -32px; }
.calendar_highest          { background-position: -64px -32px; }
.camera_highest            { background-position: -96px -32px; }
.camera-primary80          { background-position: -128px -32px; }
.camera-low                { background-position: -160px -32px; }
.camera_high               { background-position: -192px -32px; }
.check_circle_high         { background-position: -224px -32px; }
.check_circle-low          { background-position: -256px -32px; }
.check_circle-primary80    { background-position: -288px -32px; }
.check_circle_highest      { background-position: -320px -32px; }
.check_high                { background-position: -352px -32px; }
.check-low                 { background-position: -384px -32px; }
/* Row 2 */
.check-primary80           { background-position: 0 -64px; }
.check_highest             { background-position: -32px -64px; }
.chevron_right_high        { background-position: -64px -64px; }
.chevron_right-low         { background-position: -96px -64px; }
.chevron_right-primary80   { background-position: -128px -64px; }
.chevron_right_highest     { background-position: -160px -64px; }
.chevron_down_high         { background-position: -192px -64px; }
.chevron-down-low          { background-position: -224px -64px; }
.chevron-down-primary80    { background-position: -256px -64px; }
.chevron-down_highest      { background-position: -288px -64px; }
.chevron_up_high           { background-position: -320px -64px; }
.chevron-up-low            { background-position: -352px -64px; }
.chevron-up-primary80      { background-position: -384px -64px; }
/* Row 3 */
.chevron-up_highest        { background-position: 0 -96px; }
.clock_high                { background-position: -32px -96px; }
.clock-low                 { background-position: -64px -96px; }
.clock-primary80           { background-position: -96px -96px; }
.clock_highest             { background-position: -128px -96px; }
.close_high                { background-position: -160px -96px; }
.close-low                 { background-position: -192px -96px; }
.close-primary80           { background-position: -224px -96px; }
.close_highest             { background-position: -256px -96px; }
.content_copy_high         { background-position: -288px -96px; }
.content_copy-low          { background-position: -320px -96px; }
.content_copy-primary80    { background-position: -352px -96px; }
.content_copy_highest      { background-position: -384px -96px; }
/* Row 4 */
.delete_high               { background-position: 0 -128px; }
.delete-low                { background-position: -32px -128px; }
.delete-primary80          { background-position: -64px -128px; }
.delete_highest            { background-position: -96px -128px; }
.feeder_high               { background-position: -128px -128px; }
.feeder-low                { background-position: -160px -128px; }
.feeder-primary80          { background-position: -192px -128px; }
.feeder_highest            { background-position: -224px -128px; }
.edit_highest              { background-position: -256px -128px; }
.draw-area_highest         { background-position: -288px -128px; }
.draw-area-primary80       { background-position: -320px -128px; }
.draw-area-low             { background-position: -352px -128px; }
.draw_area_high            { background-position: -384px -128px; }
/* Row 5 */
.edit-primary80            { background-position: 0 -160px; }
.edit-low                  { background-position: -32px -160px; }
.edit_high                 { background-position: -64px -160px; }
.draw-tool_highest         { background-position: -96px -160px; }
.draw-tool-primary80       { background-position: -128px -160px; }
.draw-tool-low             { background-position: -160px -160px; }
.draw_tool_high            { background-position: -192px -160px; }
.draw-line_highest         { background-position: -224px -160px; }
.draw-line-primary80       { background-position: -256px -160px; }
.draw-line-low             { background-position: -288px -160px; }
.draw_line_high            { background-position: -320px -160px; }
.hunt_strategy_high        { background-position: -352px -160px; }
.hunt-strategy_highest     { background-position: -384px -160px; }
/* Row 6 */
.hunt-strategy-primary80   { background-position: 0 -192px; }
.hunt-strategy-low         { background-position: -32px -192px; }
.layers_new_high           { background-position: -64px -192px; }
.layers-new-low            { background-position: -96px -192px; }
.layers-new-primary80      { background-position: -128px -192px; }
.layers-new_highest        { background-position: -160px -192px; }
.lock_fomo_high            { background-position: -192px -192px; }
.lock-fomo-low             { background-position: -224px -192px; }
.lock-fomo-primary80       { background-position: -256px -192px; }
.lock-fomo_highest         { background-position: -288px -192px; }
.map_high                  { background-position: -320px -192px; }
.map-low                   { background-position: -352px -192px; }
.map-primary80             { background-position: -384px -192px; }
/* Row 7 */
.map_highest               { background-position: 0 -224px; }
.near_me_high              { background-position: -32px -224px; }
.near_me-low               { background-position: -64px -224px; }
.near_me-primary80         { background-position: -96px -224px; }
.near_me_highest           { background-position: -128px -224px; }
.my_property_high          { background-position: -160px -224px; }
.my-property-low           { background-position: -192px -224px; }
.my-property-primary80     { background-position: -224px -224px; }
.my-property_highest       { background-position: -256px -224px; }
.my_content_folder_high    { background-position: -288px -224px; }
.my-content-folder-low     { background-position: -320px -224px; }
.my-content-folder-primary80 { background-position: -352px -224px; }
.my-content-folder_highest { background-position: -384px -224px; }
/* Row 8 */
.pin_outline_high          { background-position: 0 -256px; }
.pin-outline-low           { background-position: -32px -256px; }
.pin-outline-primary80     { background-position: -64px -256px; }
.pin-outline_highest       { background-position: -96px -256px; }
.pin_high                  { background-position: -128px -256px; }
.pin-low                   { background-position: -160px -256px; }
.pin-primary80             { background-position: -192px -256px; }
.pin_highest               { background-position: -224px -256px; }
.redo_high                 { background-position: -256px -256px; }
.redo-low                  { background-position: -288px -256px; }
.redo-primary80            { background-position: -320px -256px; }
.redo_highest              { background-position: -352px -256px; }
.rotate-left-high          { background-position: -384px -256px; }
/* Row 9 */
.rotate-left-low           { background-position: 0 -288px; }
.rotate-left-primary80     { background-position: -32px -288px; }
.rotate-left_highest       { background-position: -64px -288px; }
.rotate-right-high         { background-position: -96px -288px; }
.rotate-right-low          { background-position: -128px -288px; }
.rotate-right-primary80    { background-position: -160px -288px; }
.rotate-right_highest      { background-position: -192px -288px; }
.search-high               { background-position: -224px -288px; }
.search-low                { background-position: -256px -288px; }
.search-primary80          { background-position: -288px -288px; }
.search_highest            { background-position: -320px -288px; }
.track-high                { background-position: -352px -288px; }
.track-low                 { background-position: -384px -288px; }
/* Row 10 */
.track-primary80           { background-position: 0 -320px; }
.track_highest             { background-position: -32px -320px; }
.undo-high                 { background-position: -64px -320px; }
.undo-low                  { background-position: -96px -320px; }
.undo-primary80            { background-position: -128px -320px; }
.undo_highest              { background-position: -160px -320px; }
.tools-high                { background-position: -192px -320px; }
.tools-low                 { background-position: -224px -320px; }
.tools-primary80           { background-position: -256px -320px; }
.tools_highest             { background-position: -288px -320px; }
.zoom-in-high              { background-position: -320px -320px; }
.zoom-in-low               { background-position: -352px -320px; }
.zoom-in-primary80         { background-position: -384px -320px; }
/* Row 11 */
.zoom-in_highest           { background-position: 0 -352px; }
.zoom-out-high             { background-position: -32px -352px; }
.zoom-out-low              { background-position: -64px -352px; }
.zoom-out-primary80        { background-position: -96px -352px; }
.zoom-out_highest          { background-position: -128px -352px; }
.visibility-on-high        { background-position: -160px -352px; }
.visibility-on-low         { background-position: -192px -352px; }
.visibility-on-primary80   { background-position: -224px -352px; }
.visibility-on_highest     { background-position: -256px -352px; }
.visibility-off-high       { background-position: -288px -352px; }
.visibility-off-low        { background-position: -320px -352px; }
.visibility-off-primary80  { background-position: -352px -352px; }
.visibility-off_highest    { background-position: -384px -352px; }


/* ==========================================================================
   Drawing Styles — drawing-styles.png  (1312×1088 native → 328×272 display)
   Base class: .pradco-sprite-drawing-style
   ========================================================================== */

.pradco-sprite-drawing-style {
    background: url('../images/sprites/drawing-styles.png') no-repeat;
    background-size: 328px 272px;
    width: 48px;
    height: 48px;
    display: inline-block;
}

/* Row 0 */
.blue-selected       { background-position: 0 0; }
.yellow-selected     { background-position: -56px 0; }
.green-selected      { background-position: -112px 0; }
.gray-selected       { background-position: -168px 0; }
.cyan-selected       { background-position: -224px 0; }
.pink-selected       { background-position: -280px 0; }
/* Row 1 */
.brown-selected      { background-position: 0 -56px; }
.orange-selected     { background-position: -56px -56px; }
.red-selected        { background-position: -112px -56px; }
.blue-unselected     { background-position: -168px -56px; }
.yellow-unselected   { background-position: -224px -56px; }
.green-unselected    { background-position: -280px -56px; }
/* Row 2 */
.gray-unselected     { background-position: 0 -112px; }
.cyan-unselected     { background-position: -56px -112px; }
.pink-unselected     { background-position: -112px -112px; }
.brown-unselected    { background-position: -168px -112px; }
.orange-unselected   { background-position: -224px -112px; }
.red-unselected      { background-position: -280px -112px; }
/* Row 3 */
.dot-line-unselected { background-position: 0 -168px; }
.dot-line-selected   { background-position: -56px -168px; }
.dot-selected        { background-position: -112px -168px; }
.dot-unselected      { background-position: -168px -168px; }
.dash-line-selected  { background-position: -224px -168px; }
.dash-line-unselected{ background-position: -280px -168px; }
/* Row 4 */
.nofill-selected     { background-position: 0 -224px; }
.solid-line-unselected { background-position: -56px -224px; }
.solid-line-selected { background-position: -112px -224px; }
.stripefill-selected { background-position: -168px -224px; }
.stripefill-unselected { background-position: -224px -224px; }
.nofill-unselected   { background-position: -280px -224px; }


/* ==========================================================================
   Selection States — selection-states.png  (352×160 native → 88×40 display)
   Base class: .pradco-sprite-selection-state
   ========================================================================== */

.pradco-sprite-selection-state {
    background: url('../images/sprites/selection-states.png') no-repeat;
    background-size: 88px 40px;
    width: 40px;
    height: 40px;
    display: inline-block;
}

.checkbox-selected   { background-position: 0 0; }
.checkbox-unselected { background-position: -48px 0; }


/* ==========================================================================
   Base Maps — base-maps.png  (1504×1120 native → 376×280 display)
   Base class: .pradco-sprite-base-map
   ========================================================================== */

.pradco-sprite-base-map {
    background: url('../images/sprites/base-maps.png') no-repeat;
    background-size: 376px 280px;
    width: 88px;
    height: 88px;
    display: inline-block;
}

/* Row 0 */
.street-layer-selected         { background-position: 0 0; }
.satellite-layer-selected      { background-position: -96px 0; }
.terrain-layer-selected        { background-position: -192px 0; }
.topo-layer-selected           { background-position: -288px 0; }
/* Row 1 */
.propertylines-layer-selected  { background-position: 0 -96px; }
.street-layer-unselected       { background-position: -96px -96px; }
.topo-layer-unselected         { background-position: -192px -96px; }
.propertylines-layer-unselected{ background-position: -288px -96px; }
/* Row 2 */
.satellite-layer-unselected    { background-position: 0 -192px; }
.terrain-layer-unselected      { background-position: -96px -192px; }