{"version":3,"sources":["components/CalendarView/Calendar.scss","home/runner/work/date-components/date-components/node_modules/@gravity-ui/uikit/styles/mixins.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA;EAEA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAKA;EAEA;;AAEA;EACI;;AAGJ;EACI;ECkJJ;EACA;EACA;EACA;;ADhJA;EACI;EACA;EAEA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EAEA;EAEA;EACA;EAEA;;AAGJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;IACI;IAEA;;EAEJ;IACI;IAEA;;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAIR;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;EACI;;AAEA;EACI;;AAEJ;EACI;;AAIR;EACI;IACI;;;AAKZ;EACI;EACA;;AAEA;EAGI;EAEA;;AAGJ;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EAEA;EACA;;AAEA;EACI;;AAIR;EACI;EAEA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;;AAGJ;EACI;;AAGJ;EACI;EAEA;;AAGJ;EACI;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;;AAGJ;EACI;EACA;EAEA;;AAGJ;EACI;EACA;EAEA;EACA;;AAIR;EACI","sourcesContent":["@use '@gravity-ui/uikit/styles/mixins';\n@use '../variables';\n\n$block: '.#{variables.$ns}calendar';\n\n#{$block} {\n    --_--calendar-padding: var(--g-date-calendar-padding, 8px);\n    --_--calendar-day-size: var(--g-date-calendar-day-size, 28px);\n    --_--calendar-days-gap: var(--g-date-calendar-days-gap, 2px);\n\n    --_--calendar-width: calc(\n        7 * var(--_--calendar-day-size) + 6 * var(--_--calendar-days-gap) + 2 *\n            var(--_--calendar-padding)\n    );\n    --_--calendar-grid-height: calc(\n        7 * var(--_--calendar-day-size) + 5 * var(--_--calendar-days-gap) +\n            var(--_--calendar-padding)\n    );\n\n    display: inline-block;\n\n    width: var(--_--calendar-width);\n\n    &_size_l {\n        --g-date-calendar-day-size: 36px;\n    }\n\n    &_size_xl {\n        --g-date-calendar-day-size: 42px;\n\n        @include mixins.text-body-2();\n    }\n\n    &__header {\n        display: flex;\n        justify-content: space-between;\n\n        padding: var(--_--calendar-padding) var(--_--calendar-padding) 0;\n    }\n\n    &__years-label {\n        color: var(--g-color-text-secondary);\n    }\n\n    &__controls {\n        display: flex;\n        flex-shrink: 1;\n        justify-content: flex-end;\n        gap: var(--g-spacing-2);\n    }\n\n    &__control-icon {\n        transform: scaleX(var(--g-flow-direction));\n    }\n\n    &__grid {\n        position: relative;\n\n        overflow: hidden;\n\n        width: 100%;\n        height: var(--_--calendar-grid-height);\n\n        user-select: none;\n    }\n\n    &__content {\n        position: absolute;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n\n        display: grid;\n        grid-template-rows: var(--_--calendar-day-size) 1fr;\n\n        box-sizing: border-box;\n        width: 100%;\n        height: 100%;\n        padding: 0 var(--_--calendar-padding) var(--_--calendar-padding);\n\n        @keyframes calendar-forward {\n            from {\n                transform: translateX(0);\n            }\n            to {\n                transform: translateX(100%);\n            }\n        }\n\n        @keyframes calendar-backward {\n            from {\n                transform: translateX(0);\n            }\n            to {\n                transform: translateX(-100%);\n            }\n        }\n\n        @keyframes calendar-zoom-in-showing {\n            from {\n                opacity: 0;\n\n                transform: scale(2);\n            }\n            to {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n        }\n\n        @keyframes calendar-zoom-in-hiding {\n            from {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n            to {\n                opacity: 0;\n\n                transform: scale(0);\n            }\n        }\n\n        @keyframes calendar-zoom-out-showing {\n            from {\n                opacity: 0;\n\n                transform: scale(0);\n            }\n            to {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n        }\n\n        @keyframes calendar-zoom-out-hiding {\n            from {\n                opacity: 1;\n\n                transform: scale(1);\n            }\n            to {\n                opacity: 0;\n\n                transform: scale(2);\n            }\n        }\n\n        &_animation_forward {\n            transform: translateX(-100%);\n            animation: calendar-forward 0.25s ease forwards;\n\n            &#{$block}__current-state {\n                inset-inline-start: calc(var(--g-flow-direction) * -100%);\n            }\n        }\n\n        &_animation_backward {\n            transform: translateX(0);\n            animation: calendar-backward 0.25s ease forwards;\n\n            &#{$block}__current-state {\n                inset-inline-start: calc(var(--g-flow-direction) * 100%);\n            }\n        }\n\n        &_animation_zoom-in {\n            transform: scale();\n\n            &#{$block}__previous-state {\n                animation: calendar-zoom-in-hiding 0.25s ease forwards;\n            }\n            &#{$block}__current-state {\n                animation: calendar-zoom-in-showing 0.25s ease forwards;\n            }\n        }\n\n        &_animation_zoom-out {\n            transform: scale();\n\n            &#{$block}__current-state {\n                animation: calendar-zoom-out-showing 0.25s ease forwards;\n            }\n            &#{$block}__previous-state {\n                animation: calendar-zoom-out-hiding 0.25s ease forwards;\n            }\n        }\n\n        @media screen and (prefers-reduced-motion: reduce), (update: slow) {\n            &[class] {\n                animation-duration: 0.001ms;\n            }\n        }\n    }\n\n    &__grid-rowgroup {\n        display: grid;\n        gap: var(--_--calendar-days-gap);\n\n        &_mode_months,\n        &_mode_quarters,\n        &_mode_years {\n            grid-row: 1 / -1;\n\n            padding: 12px 0 0;\n        }\n\n        &-header {\n            align-self: center;\n        }\n    }\n\n    &__grid-row {\n        display: grid;\n        grid-auto-columns: 1fr;\n        grid-auto-flow: column;\n        gap: var(--_--calendar-days-gap);\n    }\n\n    &__weekday {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        width: 100%;\n        height: 100%;\n\n        &_weekend {\n            color: var(--g-color-text-danger);\n        }\n    }\n\n    &__button {\n        position: relative;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        width: 100%;\n        height: 100%;\n\n        font-weight: var(--g-text-subheader-font-weight);\n        cursor: pointer;\n        text-transform: capitalize;\n\n        border-radius: 4px;\n        outline: none;\n\n        &:focus {\n            box-shadow: 0 0 0 2px var(--g-color-line-misc);\n        }\n\n        &:focus:not(:focus-visible) {\n            box-shadow: none;\n        }\n\n        &:hover {\n            background-color: var(--g-color-base-generic);\n        }\n\n        &_selected[class] {\n            background-color: var(--g-color-base-selection);\n        }\n\n        &_selected#{&}_selection-start,\n        &_selected#{&}_selection-end {\n            background-color: var(--g-color-base-brand);\n        }\n\n        &_weekend {\n            color: var(--g-color-text-danger);\n        }\n\n        &_out-of-boundary {\n            font-weight: var(--g-text-body-font-weight);\n\n            opacity: 0.6;\n        }\n\n        &_current::before {\n            position: absolute;\n            inset-block-start: 50%;\n\n            display: block;\n\n            width: 4px;\n            height: 4px;\n\n            content: '';\n\n            border-radius: 50%;\n            background-color: currentColor;\n\n            transform: translateY(8px);\n        }\n\n        &_disabled {\n            font-weight: var(--g-text-body-font-weight);\n            pointer-events: none;\n\n            opacity: 0.6;\n        }\n\n        &_unavailable:not(&_disabled) {\n            font-weight: var(--g-text-body-font-weight);\n            cursor: default;\n\n            opacity: 0.5;\n            background-color: var(--g-color-base-generic);\n        }\n    }\n\n    &__mode-label {\n        text-transform: capitalize;\n    }\n}\n","@use 'sass:list';\n@use 'sass:selector';\n\n@mixin overflow-ellipsis($type: ellipsis) {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: $type;\n}\n\n@mixin button-reset() {\n    padding: 0;\n\n    font-family: var(--g-text-body-font-family);\n    font-size: inherit;\n    font-weight: var(--g-text-body-font-weight);\n\n    color: inherit;\n    background: none;\n    border: none;\n    outline: none;\n    cursor: pointer;\n}\n\n@mixin link-reset() {\n    color: inherit;\n    text-decoration: inherit;\n}\n\n@mixin expand-interactive-area($h: 4px, $v: $h) {\n    position: relative;\n\n    &::after {\n        content: '';\n        position: absolute;\n        inset: logical (-$v) (-$h);\n    }\n}\n\n@mixin max-height($height) {\n    max-height: $height;\n    overflow-y: auto;\n}\n\n@mixin max-text-width($width: 100%) {\n    @include overflow-ellipsis();\n\n    max-width: $width;\n}\n\n@mixin aspect-ratio($ratio) {\n    position: relative;\n\n    &::before {\n        display: block;\n        content: '';\n        width: 100%;\n        padding-block-start: $ratio * 100%;\n    }\n\n    > *:only-child {\n        position: absolute;\n        inset: 0;\n    }\n}\n\n@function get-pin-selector($mod, $selector, $append: true) {\n    @if $append {\n        @return selector.append($mod, $selector);\n    } @else {\n        @return list.join($mod, $selector, $separator: space);\n    }\n}\n\n@mixin pin($block, $selectors, $radius, $append: true) {\n    @each $selector in $selectors {\n        @at-root #{get-pin-selector(#{$block}_pin_round-round, $selector, $append)} {\n            border-radius: $radius;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-brick, $selector, $append)} {\n            border-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-circle, $selector, $append)} {\n            border-radius: 100px;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_round-brick, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_round-clear, $selector, $append)} {\n            border-start-start-radius: $radius;\n            border-start-end-radius: 0;\n            border-end-start-radius: $radius;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-round, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: $radius;\n            border-end-start-radius: 0;\n            border-end-end-radius: $radius;\n            border-inline-start: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-clear, $selector, $append)} {\n            border-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-brick, $selector, $append)} {\n            border-radius: 0;\n            border-inline-start: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-brick, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_brick-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_circle-clear, $selector, $append)} {\n            border-start-start-radius: 100px;\n            border-start-end-radius: 0;\n            border-end-start-radius: 100px;\n            border-end-end-radius: 0;\n            border-inline-end: 0;\n        }\n\n        @at-root #{get-pin-selector(#{$block}_pin_clear-circle, $selector, $append)} {\n            border-start-start-radius: 0;\n            border-start-end-radius: 100px;\n            border-end-start-radius: 0;\n            border-end-end-radius: 100px;\n            border-inline-start: 0;\n        }\n    }\n}\n\n// Typography\n\n@mixin text-body-1() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-1-font-size);\n    line-height: var(--g-text-body-1-line-height);\n}\n\n@mixin text-body-2() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-2-font-size);\n    line-height: var(--g-text-body-2-line-height);\n}\n\n@mixin text-body-3() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-3-font-size);\n    line-height: var(--g-text-body-3-line-height);\n}\n\n@mixin text-body-short() {\n    font-family: var(--g-text-body-font-family);\n    font-weight: var(--g-text-body-font-weight);\n    font-size: var(--g-text-body-short-font-size);\n    line-height: var(--g-text-body-short-line-height);\n}\n\n@mixin text-caption-1() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-1-font-size);\n    line-height: var(--g-text-caption-1-line-height);\n}\n\n@mixin text-caption-2() {\n    font-family: var(--g-text-caption-font-family);\n    font-weight: var(--g-text-caption-font-weight);\n    font-size: var(--g-text-caption-2-font-size);\n    line-height: var(--g-text-caption-2-line-height);\n}\n\n@mixin text-header-1() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-1-font-size);\n    line-height: var(--g-text-header-1-line-height);\n}\n\n@mixin text-header-2() {\n    font-family: var(--g-text-header-font-family);\n    font-weight: var(--g-text-header-font-weight);\n    font-size: var(--g-text-header-2-font-size);\n    line-height: var(--g-text-header-2-line-height);\n}\n\n@mixin text-subheader-1() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-1-font-size);\n    line-height: var(--g-text-subheader-1-line-height);\n}\n\n@mixin text-subheader-2() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-2-font-size);\n    line-height: var(--g-text-subheader-2-line-height);\n}\n\n@mixin text-subheader-3() {\n    font-family: var(--g-text-subheader-font-family);\n    font-weight: var(--g-text-subheader-font-weight);\n    font-size: var(--g-text-subheader-3-font-size);\n    line-height: var(--g-text-subheader-3-line-height);\n}\n\n@mixin text-display-1() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-1-font-size);\n    line-height: var(--g-text-display-1-line-height);\n}\n\n@mixin text-display-2() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-2-font-size);\n    line-height: var(--g-text-display-2-line-height);\n}\n\n@mixin text-display-3() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-3-font-size);\n    line-height: var(--g-text-display-3-line-height);\n}\n\n@mixin text-display-4() {\n    font-family: var(--g-text-display-font-family);\n    font-weight: var(--g-text-display-font-weight);\n    font-size: var(--g-text-display-4-font-size);\n    line-height: var(--g-text-display-4-line-height);\n}\n\n@mixin text-code-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-1-font-size);\n    line-height: var(--g-text-code-1-line-height);\n}\n\n@mixin text-code-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-2-font-size);\n    line-height: var(--g-text-code-2-line-height);\n}\n\n@mixin text-code-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-3-font-size);\n    line-height: var(--g-text-code-3-line-height);\n}\n\n@mixin text-code-inline-1() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-1-font-size);\n    line-height: var(--g-text-code-inline-1-line-height);\n}\n\n@mixin text-code-inline-2() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-2-font-size);\n    line-height: var(--g-text-code-inline-2-line-height);\n}\n\n@mixin text-code-inline-3() {\n    font-family: var(--g-text-code-font-family);\n    font-weight: var(--g-text-code-font-weight);\n    font-size: var(--g-text-code-inline-3-font-size);\n    line-height: var(--g-text-code-inline-3-line-height);\n}\n\n@mixin text-accent() {\n    font-weight: var(--g-text-accent-font-weight);\n}\n\n@mixin loading($loading-color-1: rgba(255, 255, 255, 0.3), $loading-color-2: transparent) {\n    background-image: repeating-linear-gradient(\n        -45deg,\n        $loading-color-1,\n        $loading-color-1 4px,\n        $loading-color-2 4px,\n        $loading-color-2 8px\n    );\n    background-size: 150%;\n    background-clip: padding-box;\n\n    // stylelint-disable-next-line no-unknown-animations\n    animation: g-loading-animation 0.5s linear infinite;\n\n    @media (prefers-reduced-motion: reduce) {\n        animation: none;\n    }\n}\n\n@mixin scrollbar() {\n    &::-webkit-scrollbar,\n    *::-webkit-scrollbar {\n        width: var(--g-scrollbar-width);\n        height: var(--g-scrollbar-width);\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-track,\n    *::-webkit-scrollbar-track {\n        background: var(--g-color-scroll-track);\n    }\n\n    &::-webkit-scrollbar-corner,\n    *::-webkit-scrollbar-corner {\n        background: var(--g-color-scroll-corner);\n    }\n\n    &::-webkit-scrollbar-thumb,\n    *::-webkit-scrollbar-thumb {\n        background: var(--g-color-scroll-handle);\n    }\n\n    &::-webkit-scrollbar-thumb:hover,\n    *::-webkit-scrollbar-thumb:hover {\n        background: var(--g-color-scroll-handle-hover);\n    }\n}\n"],"file":"Calendar.css"}