@layer components {
    .redacted-content {
        display: contents;

        & .redacted-content__wrapper {
            display: contents;
        }

        & .redacted {
            background-color: black;
            color: transparent;
            user-select: none;
            transition: background-color 0.3s ease, color 0.3s ease, opacity 0.5s ease;
            cursor: help;
            border-radius: 2px;
            padding-inline: 2px;
            margin-inline: 1px;
            position: relative;
            display: inline;
            line-height: 1.2;
            text-shadow: none;

            /* "Baterka" efekt - pri hoveri sa text stane mierne čitateľným (presvitajúcim) */
            &:hover {
                background-color: rgba(0, 0, 0, 0.1) !important;
                color: rgba(0, 0, 0, 0.8) !important;
            }
        }

        & .highlighted {
            text-decoration: underline wavy #b22222;
            text-decoration-thickness: 1.5px;
            text-underline-offset: 2px;
            color: #b22222;
            display: inline;
        }
    }

    [data-theme="dark"] .redacted-content {
        & .redacted {
            &:hover {
                background-color: rgba(255, 255, 255, 0.1) !important;
                color: rgba(255, 255, 255, 0.8) !important;
            }
        }

        & .highlighted {
            text-decoration-color: #ff4d4d;
            color: #ff4d4d;
        }
    }
}