@layer genr.component {
    .copyright {
        position: absolute;
        bottom: 0.5rem;
        z-index: 1;
        display: flex;
        min-width: 1.5rem;
        max-width: calc(100% - 1rem);
        min-height: 1.5rem;
        padding: 0.25rem;
        border-radius: 0.75rem;
        background-color: var(--color-black);
        color: var(--color-white);
        backdrop-filter: blur(1rem);

        &[aria-expanded='true'] {
            .copyright__text {
                display: block;
            }
        }

        .icon {
            position: absolute;
            bottom: 0.25rem;
            fill: var(--color-white);
        }
    }

    .copyright--right {
        right: 0.5rem;

        .copyright__text {
            margin-right: 1rem;
        }

        .icon {
            right: 0.25rem;
        }
    }

    .copyright--left {
        left: 0.5rem;

        .copyright__text {
            margin-left: 1rem;
        }

        .icon {
            left: 0.25rem;
        }
    }

    .copyright__text {
        display: none;
        padding: 0 0.5rem;
        line-height: 1.1;
    }
}