////////////////////////////////////////////////////////////////////////////////
//
//  Licensed to the Apache Software Foundation (ASF) under one or more
//  contributor license agreements.  See the NOTICE file distributed with
//  this work for additional information regarding copyright ownership.
//  The ASF licenses this file to You under the Apache License, Version 2.0
//  (the "License"); you may not use this file except in compliance with
//  the License.  You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//  Unless required by applicable law or agreed to in writing, software
//  distributed under the License is distributed on an "AS IS" BASIS,
//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//  See the License for the specific language governing permissions and
//  limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

// Jewel DateField

// DateField variables
$datefield-input-width: 9.2em
$datefield-button-size: 22px
$datefield-button-xoffset: calc(50% - #{math.div($datefield-button-size, 2)})
$datefield-button-yoffset: calc(50% - #{math.div($datefield-button-size, 2)})
$datechooser-popup-margin-offset: 10px
$datechooser-popup-overlay-color: #000 !default
$datechooser-popup-overlay-opacity: .65 !default
$datechooser-item-min-heigh: 34px

.jewel.datefield
    display: inline-flex

    .jewel.textinput
        input
            width: $datefield-input-width

    .jewel.button
        
        &::before
            margin: 0
            padding: 0
            
            line-height: $datefield-button-size

        &::after
            content: ' '
            position: absolute

            width: $datefield-button-size
            height: $datefield-button-size

            left: $datefield-button-xoffset
            top: $datefield-button-yoffset

.datechooser-popup
    position: fixed
    pointer-events: none

    bottom: 0
    left: 0

    width: 100%
    height: 100%

    overflow: hidden
    contain: strict

    z-index: $app-control-popups-zindex

    color: rgba(0, 0, 0, 0.8)

    &::before
        position: absolute
        display: block

        top: 0
        left: 0

        width: 100%
        height: 100%

        content: ""
        opacity: 0

        background-color: rgba($datechooser-popup-overlay-color, $datechooser-popup-overlay-opacity)
        will-change: opacity
        transition: animation-standard(opacity, .4s)


    .jewel.table
        position: relative
        transform: translate(-50%, 100%)
        transition: none
        will-change: transform, opacity
        
        bottom: auto
        top: calc(100% - #{$datechooser-popup-margin-offset})
        left: 50%
        touch-action: none
        box-shadow: 0px 0px 6px 1px rgba(.7, .7, .7, .7) !important

        opacity: 0

    &.open
        pointer-events: auto

        &::before
            opacity: 1

        .jewel.table
            transform: translate(-50%, -100%)
            transition: animation-standard(transform, .4s), animation-standard(opacity, .4s)
            opacity: 1

@media (max-width: $tablet)
    .datechooser-popup
        .jewel.table
            width: calc(100% - #{2*$datechooser-popup-margin-offset})

@media (min-width: $tablet) and (max-width: $desktop)
    .datechooser-popup
        .jewel.table
            width: calc(100% - #{30*$datechooser-popup-margin-offset})

@media (min-width: $desktop)
    .datechooser-popup
        &::before
            background-color: rgba($datechooser-popup-overlay-color, 0)
        .jewel.table
            // transform: translate(0px, -200px)
            transform: none
            transition: none
            box-shadow: none !important

            .jewel.item
                height: 0
                overflow: hidden
                transition: height 200ms ease-in

        &.open
            .jewel.table
                transform: none
                top: auto
                left: auto

                .jewel.item
                    height: $datechooser-item-min-heigh //this should match $item-min-heigh in _itemrenderer.sass


j|DateField
    IBeadView: ClassReference("org.apache.royale.jewel.beads.views.DateFieldView")
    IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.DateChooserModel")
    IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.DateFieldMouseController")
    // IFormatter: ClassReference("org.apache.royale.html.accessories.DateFormatMMDDYYYY")
    IFormatter: ClassReference("org.apache.royale.html.accessories.StringDateFormatter")
    IPopUp: ClassReference("org.apache.royale.jewel.DateChooser")

@media -royale-swf

