@layer components {
    .security-logo {
            background: var(--dashboard-color-pill);
            color: var(--dashboard-color-text-muted);
            flex: 0 0 auto;
            font-size: 0.75rem;
            height: 1.25rem;
            overflow: hidden;
            position: relative;
            width: 1.25rem;
        }

    .security-logo--shadow {
            box-shadow: 0 1px 2px 0 rgb(15 23 42 / 6%);
        }

    .security-logo--size-5 {
            height: 1.25rem;
            width: 1.25rem;
        }

    .security-logo--size-10 {
            height: 2.5rem;
            width: 2.5rem;
        }

    .security-logo--size-20 {
            font-size: 1.5rem;
            height: 5rem;
            width: 5rem;
        }

    .security-logo__image {
            display: block;
            height: 100%;
            object-fit: contain;
            width: 100%;
        }

    .security-logo__fallback {
            align-items: center;
            background: var(--dashboard-color-pill);
            color: var(--dashboard-color-text-muted);
            display: flex;
            font-weight: 600;
            height: 100%;
            justify-content: center;
            width: 100%;
        }

    .security-logo__fallback.hidden {
            display: none;
        }
}