From 41b0d0497988274057fc2512c822a6bc9d2d3ebd Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 6 Aug 2025 16:40:56 +0200
Subject: Switch to tab indentation

---
 src/objects/_card.scss | 530 ++++++++++++++++++++++++-------------------------
 1 file changed, 265 insertions(+), 265 deletions(-)

(limited to 'src/objects/_card.scss')

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 4bd6a59..ebab339 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -8,270 +8,270 @@
 @use 'card.vars' as vars;
 
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
-
-    @include bem.object('card') {
-        position:         relative;
-        display:          flex;
-        flex-direction:   column;
-        background-color: props.get(vars.$bg-color);
-        border:           props.get(vars.$border-width) solid transparent;
-        border-color:     props.get(vars.$border-color);
-        border-radius:    props.get(vars.$rounding);
-        transition:       transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
-
-        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-            &:hover,
-            &:active,
-            &:focus-visible {
-                transform:        translateY(props.get(vars.$hover--offset-b));
-                background-color: props.get(vars.$hover--bg-color);
-                border-color:     props.get(vars.$hover--border-color);
-                box-shadow:       none;
-            }
-
-            &:focus-visible {
-                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
-                transition:    transform .2s;
-                border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
-                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-                outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                box-shadow:
-                    0 0 0
-                    calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                    props.get(vars.$key-focus--outline-color);
-            }
-        }
-
-        @include bem.modifier('borderless') {
-            border-color: props.get(vars.$bg-color);
-        }
-
-        @include bem.modifier('shadow') {
-            box-shadow:
-                props.get(vars.$shadow-x)
-                props.get(vars.$shadow-y)
-                props.get(vars.$shadow-blur)
-                props.get(vars.$shadow-grow)
-                props.get(vars.$shadow-color);
-
-            @include bem.modifier('quiet') {
-                @include bem.elem('image') {
-                    box-shadow:
-                        props.get(vars.$shadow-x)
-                        props.get(vars.$shadow-y)
-                        props.get(vars.$shadow-blur)
-                        props.get(vars.$shadow-grow)
-                        props.get(vars.$shadow-color);
-                }
-            }
-        }
-
-        @include bem.elem('avatar') {
-            margin-block-start:  props.get(vars.$pad-b);
-            margin-inline-start: props.get(vars.$pad-i);
-        }
-
-        @include bem.elem('image') {
-            position:      relative;
-            display:       block;
-            flex:          0 0 auto;
-            inline-size:   calc(100% + 2 * props.get(vars.$border-width));
-            margin:        calc(-1 * props.get(vars.$border-width));
-            overflow:      hidden;
-            object-fit:    cover;
-            transition:    background-color .2s, transform .2s, opacity .2s;
-
-            &:first-child {
-                border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-            }
-
-            &:last-child {
-                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-            }
-
-            @include bem.next-elem('avatar') {
-                margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
-            }
-        }
-
-        @include bem.elem('image-img') {
-            display:     block;
-            inline-size: 100%;
-            object-fit:  cover;
-        }
-
-        @include bem.elem('image-overlay') {
-            position:        absolute;
-            inset-block-end: 0;
-            inset-inline:    0;
-            z-index:         5;
-            padding-block:   props.get(vars.$image-overlay--pad-b);
-            padding-inline:  props.get(vars.$image-overlay--pad-i);
-        }
-
-        @include bem.elem('body') {
-            flex:            1 0 auto;
-            padding-block:   props.get(vars.$pad-b);
-            padding-inline:  props.get(vars.$pad-i);
-
-            &::before {
-                display:       block;
-                margin-block:  -100em 100em;
-                content:       '';
-            }
-        }
-
-        @include bem.elem('content') {
-            margin-block-start: props.get(vars.$spacing);
-        }
-
-        @include bem.elem('footer') {
-            flex:               0 0 auto;
-            padding-block:      0 props.get(vars.$pad-b);
-            padding-inline:     props.get(vars.$pad-i);
-            margin-block-start: calc(-1 * props.get(vars.$pad-b));
-
-            &::before {
-                display:          block;
-                block-size:       props.get(vars.$divider-width);
-                margin-block:     props.get(vars.$spacing);
-                content:          '';
-                background-color: props.get(vars.$divider-width);
-            }
-        }
-
-        @include bem.modifier('quiet') {
-            margin-inline:    0;
-            background-color: transparent;
-            border:           0;
-            box-shadow:       none;
-
-            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-                &:hover,
-                &:active,
-                &:focus-visible {
-                    transform:        none;
-                    background-color: transparent;
-
-                    @include bem.elem('image') {
-                        background-color: props.get(vars.$quiet--hover--image-color);
-                        opacity:          .75;
-                        transform:        translateY(props.get(vars.$hover--offset-b));
-                    }
-                }
-
-                &:focus-visible {
-                    margin:     0;
-                    outline:    none;
-                    border:     0;
-                    box-shadow: none;
-
-                    @include bem.elem('image') {
-                        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
-                        border:           props.get(vars.$key-focus--border-offset) solid transparent;
-                        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
-                        background-color: props.get(vars.$quiet--hover--image-color);
-                        outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
-                        box-shadow:
-                            0
-                            0
-                            0
-                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-                            props.get(vars.$key-focus--outline-color);
-                        opacity:          1;
-                    }
-                }
-            }
-
-            @include bem.elem('image') {
-                position:         relative;
-                background-color: props.get(vars.$quiet--image-color);
-                background-clip:  padding-box;
-                border-radius:    props.get(vars.$rounding);
-            }
-
-            @include bem.elem('body') {
-                padding:             0;
-                padding-block-start: props.get(vars.$spacing);
-            }
-
-            @include bem.elem('footer') {
-                padding-inline: 0;
-            }
-        }
-
-        @include bem.modifier('thumbnail') {
-            @include bem.elem('image') {
-                border-radius: props.get(vars.$rounding);
-            }
-
-            @include bem.elem('body') {
-                position:                absolute;
-                inset-block-end:         calc(-1 * props.get(vars.$border-width));
-                inset-inline:            calc(-1 * props.get(vars.$border-width));
-                z-index:                 10;
-                visibility:              hidden;
-                background-color:        props.get(vars.$hover--bg-color);
-                border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
-                border-color:            transparent;
-                border-style:            solid;
-                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
-                opacity:                 0;
-                transition:
-                    border-color .2s ease,
-                    opacity .2s ease,
-                    visibility 0s .2s linear;
-            }
-
-            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-                &:hover,
-                &:active,
-                &:focus-visible {
-                    @include bem.elem('body') {
-                        border-color: props.get(vars.$hover--border-color);
-                        visibility:   visible;
-                        opacity:      1;
-                        transition:
-                            border-color .2s ease,
-                            opacity .2s ease,
-                            visibility .2s linear;
-                    }
-                }
-            }
-        }
-
-        @include bem.modifier('horizontal') {
-            flex-direction: row;
-            align-items:    center;
-
-            @include bem.elem('image') {
-                align-self:  stretch;
-                inline-size: auto;
-
-                &:first-child {
-                    border-start-end-radius:   0;
-                    border-end-start-radius:   props.get(vars.$rounding);
-                }
+	@include materialize-at-root(meta.module-variables('vars'));
+
+	@include bem.object('card') {
+		position:         relative;
+		display:          flex;
+		flex-direction:   column;
+		background-color: props.get(vars.$bg-color);
+		border:           props.get(vars.$border-width) solid transparent;
+		border-color:     props.get(vars.$border-color);
+		border-radius:    props.get(vars.$rounding);
+		transition:       transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
+
+		@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+			&:hover,
+			&:active,
+			&:focus-visible {
+				background-color: props.get(vars.$hover--bg-color);
+				border-color:     props.get(vars.$hover--border-color);
+				box-shadow:       none;
+				transform:        translateY(props.get(vars.$hover--offset-b));
+			}
+
+			&:focus-visible {
+				margin:        calc(-1 * props.get(vars.$key-focus--border-width));
+				outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+				border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
+				border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+				box-shadow:
+					0 0 0
+					calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+					props.get(vars.$key-focus--outline-color);
+				transition:    transform .2s;
+			}
+		}
+
+		@include bem.modifier('borderless') {
+			border-color: props.get(vars.$bg-color);
+		}
+
+		@include bem.modifier('shadow') {
+			box-shadow:
+				props.get(vars.$shadow-x)
+				props.get(vars.$shadow-y)
+				props.get(vars.$shadow-blur)
+				props.get(vars.$shadow-grow)
+				props.get(vars.$shadow-color);
+
+			@include bem.modifier('quiet') {
+				@include bem.elem('image') {
+					box-shadow:
+						props.get(vars.$shadow-x)
+						props.get(vars.$shadow-y)
+						props.get(vars.$shadow-blur)
+						props.get(vars.$shadow-grow)
+						props.get(vars.$shadow-color);
+				}
+			}
+		}
+
+		@include bem.elem('avatar') {
+			margin-block-start:  props.get(vars.$pad-b);
+			margin-inline-start: props.get(vars.$pad-i);
+		}
+
+		@include bem.elem('image') {
+			position:      relative;
+			display:       block;
+			flex:          0 0 auto;
+			inline-size:   calc(100% + 2 * props.get(vars.$border-width));
+			margin:        calc(-1 * props.get(vars.$border-width));
+			overflow:      hidden;
+			object-fit:    cover;
+			transition:    background-color .2s, transform .2s, opacity .2s;
+
+			&:first-child {
+				border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+				border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+			}
+
+			&:last-child {
+				border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+				border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+			}
+
+			@include bem.next-elem('avatar') {
+				margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
+			}
+		}
+
+		@include bem.elem('image-img') {
+			display:     block;
+			inline-size: 100%;
+			object-fit:  cover;
+		}
+
+		@include bem.elem('image-overlay') {
+			position:        absolute;
+			inset-block-end: 0;
+			inset-inline:    0;
+			z-index:         5;
+			padding-block:   props.get(vars.$image-overlay--pad-b);
+			padding-inline:  props.get(vars.$image-overlay--pad-i);
+		}
+
+		@include bem.elem('body') {
+			flex:            1 0 auto;
+			padding-block:   props.get(vars.$pad-b);
+			padding-inline:  props.get(vars.$pad-i);
+
+			&::before {
+				display:       block;
+				margin-block:  -100em 100em;
+				content:       '';
+			}
+		}
+
+		@include bem.elem('content') {
+			margin-block-start: props.get(vars.$spacing);
+		}
+
+		@include bem.elem('footer') {
+			flex:               0 0 auto;
+			padding-block:      0 props.get(vars.$pad-b);
+			padding-inline:     props.get(vars.$pad-i);
+			margin-block-start: calc(-1 * props.get(vars.$pad-b));
+
+			&::before {
+				display:          block;
+				block-size:       props.get(vars.$divider-width);
+				margin-block:     props.get(vars.$spacing);
+				content:          '';
+				background-color: props.get(vars.$divider-width);
+			}
+		}
+
+		@include bem.modifier('quiet') {
+			margin-inline:    0;
+			background-color: transparent;
+			border:           0;
+			box-shadow:       none;
+
+			@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+				&:hover,
+				&:active,
+				&:focus-visible {
+					background-color: transparent;
+					transform:        none;
+
+					@include bem.elem('image') {
+						background-color: props.get(vars.$quiet--hover--image-color);
+						opacity:          .75;
+						transform:        translateY(props.get(vars.$hover--offset-b));
+					}
+				}
+
+				&:focus-visible {
+					margin:     0;
+					outline:    none;
+					border:     0;
+					box-shadow: none;
+
+					@include bem.elem('image') {
+						margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+						outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+						background-color: props.get(vars.$quiet--hover--image-color);
+						border:           props.get(vars.$key-focus--border-offset) solid transparent;
+						border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+						box-shadow:
+							0
+							0
+							0
+							calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+							props.get(vars.$key-focus--outline-color);
+						opacity:          1;
+					}
+				}
+			}
+
+			@include bem.elem('image') {
+				position:         relative;
+				background-color: props.get(vars.$quiet--image-color);
+				background-clip:  padding-box;
+				border-radius:    props.get(vars.$rounding);
+			}
+
+			@include bem.elem('body') {
+				padding:             0;
+				padding-block-start: props.get(vars.$spacing);
+			}
+
+			@include bem.elem('footer') {
+				padding-inline: 0;
+			}
+		}
+
+		@include bem.modifier('thumbnail') {
+			@include bem.elem('image') {
+				border-radius: props.get(vars.$rounding);
+			}
+
+			@include bem.elem('body') {
+				position:                absolute;
+				inset-block-end:         calc(-1 * props.get(vars.$border-width));
+				inset-inline:            calc(-1 * props.get(vars.$border-width));
+				z-index:                 10;
+				visibility:              hidden;
+				background-color:        props.get(vars.$hover--bg-color);
+				border-color:            transparent;
+				border-style:            solid;
+				border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
+				border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+				border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+				opacity:                 0;
+				transition:
+					border-color .2s ease,
+					opacity .2s ease,
+					visibility 0s .2s linear;
+			}
+
+			@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+				&:hover,
+				&:active,
+				&:focus-visible {
+					@include bem.elem('body') {
+						visibility:   visible;
+						border-color: props.get(vars.$hover--border-color);
+						opacity:      1;
+						transition:
+							border-color .2s ease,
+							opacity .2s ease,
+							visibility .2s linear;
+					}
+				}
+			}
+		}
+
+		@include bem.modifier('horizontal') {
+			flex-direction: row;
+			align-items:    center;
+
+			@include bem.elem('image') {
+				align-self:  stretch;
+				inline-size: auto;
+
+				&:first-child {
+					border-start-end-radius:   0;
+					border-end-start-radius:   props.get(vars.$rounding);
+				}
     
-                &:last-child {
-                    border-start-end-radius: props.get(vars.$rounding);
-                    border-end-start-radius: 0;
-                }
-            }
-
-            @include bem.elem('body') {
-                flex: 0 0 auto;
-
-                @include bem.modifier('main') {
-                    flex-shrink:     1;
-                    inline-size:     100%;
-                    min-inline-size: 0;
-                }
-            }
-        }
-    }
+				&:last-child {
+					border-start-end-radius: props.get(vars.$rounding);
+					border-end-start-radius: 0;
+				}
+			}
+
+			@include bem.elem('body') {
+				flex: 0 0 auto;
+
+				@include bem.modifier('main') {
+					flex-shrink:     1;
+					inline-size:     100%;
+					min-inline-size: 0;
+				}
+			}
+		}
+	}
 }
-- 
cgit v1.2.3-70-g09d2