@taiga-ui/core/styles/mixins/picker.less

Core library for creating Angular components and applications using Taiga UI

@import 'mixins.less';

// @deprecated
.picker(@itemSize) {
    :host {
        display: block;
        font: var(--tui-font-text-m);
    }

    .t-row {
        position: relative;
        display: flex;
        justify-content: space-between;
        block-size: 2.25rem;
        isolation: isolate;
    }

    .t-item {
        position: relative;
        flex: 1;
        line-height: 2rem;
        border-radius: var(--tui-radius-m);

        &::before,
        &::after {
            .fullsize(absolute, inset);

            content: '';
            z-index: -1;
            border-radius: var(--tui-radius-m);
        }

        &::after {
            border-radius: 0.5rem;
        }
    }

    .t-cell {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        inline-size: @itemSize;
        text-align: center;
        outline: none;
        cursor: pointer;
        background-clip: content-box;
        box-sizing: border-box;
        border: 0.125rem solid transparent;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
            border-radius: var(--tui-radius-m);
        }

        &_today::after {
            .center-left();

            content: '';
            bottom: 0.3125rem;
            block-size: 0.125rem;
            inline-size: 0.75rem;
            border-radius: 0.375rem;
            background: var(--tui-text-primary);
        }

        &_interval {
            &::before {
                background: var(--tui-background-base-alt);

                :host._single & {
                    background: var(--tui-background-neutral-1-hover);
                }
            }

            &:not(:last-child)::before {
                right: -0.1875rem;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            &:not([data-range='start']):not(:first-child)::before {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            &:last-child:first-child::before {
                right: 0;
            }

            &:first-child > .t-item {
                border-top-left-radius: var(--tui-radius-m);
                border-bottom-left-radius: var(--tui-radius-m);
            }

            &:last-child > .t-item {
                border-top-right-radius: var(--tui-radius-m);
                border-bottom-right-radius: var(--tui-radius-m);
            }

            & > .t-item {
                border-radius: 0;
            }
        }

        &[data-range] {
            &::after {
                background: var(--tui-text-primary-on-accent-1);
            }

            & > .t-item {
                color: var(--tui-text-primary-on-accent-1);

                &::before,
                &::after {
                    background: var(--tui-background-accent-1);
                }
            }

            &:hover > .t-item::before,
            &:hover > .t-item::after {
                background: var(--tui-background-accent-1-hover);
            }

            &:active > .t-item::before,
            &:active > .t-item::after {
                background: var(--tui-background-accent-1-pressed);
            }
        }

        &[data-range='end'] {
            &::before {
                background: var(--tui-background-base-alt);

                :host._single & {
                    background: var(--tui-background-neutral-1-hover);
                }
            }

            &:not(:first-child)::before {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }

        &[data-range='end'] > .t-item {
            &::before {
                left: 0.625rem;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            &::after {
                left: -2rem;
                right: 100%;
                transform: translateX(1.6rem) scaleY(0.83) scaleX(0.5) rotate(45deg);
            }
        }

        &[data-range='start'] > .t-item {
            &::before {
                right: 0.625rem;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            &::after {
                left: 100%;
                right: -2rem;
                transform: translateX(-1.6rem) scaleY(0.83) scaleX(0.5) rotate(45deg);
            }
        }

        &[data-range='single'] > .t-item::after {
            display: none;
        }

        &_disabled {
            pointer-events: none;

            & > .t-item {
                opacity: 0.36;
            }
        }

        &:hover:not([data-range]) > .t-item {
            background: var(--tui-background-neutral-1-hover);
        }

        &:active:not([data-range]) > .t-item {
            background: var(--tui-background-neutral-1-pressed);
        }
    }
}