@use '../../styles/utils' as *

@keyframes slide
  0%
    transform: translateY(-100%)
    opacity: 0

  100%
    transform: translateY(0)
    opacity: 1

.datepicker-container
  .datepicker_wrapper
    width: 40vw
    background-color: $white
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    border-radius: 4px
    animation: slide 0.5s ease-in-out

  .date_picker
    display: flex
    background: $white
    overflow: hidden
    width: 100%
    justify-content: space-evenly
    align-items: center
    margin: 0 auto

  .button_wrapper
    width: 100%
    margin: var(--size-16px) 0
    gap: var(--size-16px)

@include mixin-responsive
  .datepicker_wrapper
    width: 80vw

  .date_picker
    width: 80%