.categorypicker {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;

    & .categorypicker-header {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.5rem 0.25rem;

        & > .categorypicker-label {
            user-select: none;

            font-weight: var(--font-bold);
            color: var(--clr-text-primary);
            text-align: start;

            transition: var(--transition-easeinout-fast);

            .categorypicker:has(.button:hover) & {
                transform: translateY(-1px);
                color: var(--clr-btn-bg-hover);
            }

            .categorypicker:has(.button:active) & {
                transform: translateY(1px);
                color: var(--clr-btn-bg-active);
            }
        }
    }

    & > .categorypicker-container {
        position: relative;

        & > .button {
            min-height: 2.25rem;
            padding: 0.25rem 1rem;
            border: var(--bdr-input);
            background-color: var(--clr-filter-btn-bg);

            &[data-selected] {
                color: var(--clr-filter-btn-text-selected);
                background-color: var(--clr-filter-btn-bg-selected);
            }
        }

        & > .popup-container {
            position: absolute;
            z-index: 10;
            top: 100%;
            right: 0;

            flex-direction: column;
            flex-grow: 1;
            align-items: start;
            justify-content: end;

            & > li {
                display: flex;
                flex-grow: 1;
                width: 100%;

                & > button {
                    flex-grow: 1;

                    width: 100%;
                    padding: 0.5rem 1rem;
                    border-bottom: 2px solid var(--clr-gray-mid);

                    font-weight: 700;
                    color: var(--clr-gray-dark);
                    text-align: center;

                    transition: var(--transition-easeinout-fast);

                    &:hover {
                        border-bottom: 2px solid var(--clr-black);
                        color: var(--clr-black);
                    }
                }

                & > button[data-selected] {
                    border-bottom: 2px solid var(--clr-black);
                    color: var(--clr-black);
                }
            }
        }
    }
}