@use 'sass:color';

$neo-include-datepicker: true !default;

@if $neo-include-datepicker {
  .neo-datepicker-container {
      display: inline-block;
      position: relative;
      width: 100%;
      color: initial;

      &.neo-datepicker-always-show {
        width: max-content;

        input {
          text-align: center;
          padding: 0.125rem 0;
          height: auto;
          margin-bottom: 0.25rem;
        }
      }
    }
    
    .neo-datepicker-popup {
      position: absolute;
      left: 0;
      border: 1px solid #ced4da;
      border-radius: 3px;
      background: #fff;
      text-align: center;
      font-size: 14px;
      transform-origin: center top;
      z-index: 5; /* value of 5 to appear above bootstrap focus outline. */
    
      &.neo-datepicker-inline {
        position: static;
        display: inline-block;
      }
    
      .neo-datepicker-header {
        background: #e9ecef;
        position: relative;
        height: 34px;
    
        > * {
          position: absolute;
          top: 2px;
          bottom: 3px;
          border-radius: 3px;
        }
    
        button {
          padding: 2px 4px;
          width: 24px;
          border: none;
          background: none;

          &:not(:disabled):hover {
            background-color: #ced4da;
          }
          &:disabled {
            /* Allows parent elements to receive pointer events.. */
            pointer-events: none;
          }
        }
        .left-button{
          left: 2px
        }
        .right-button {
          right: 2px;
        }
        .header-text-container {
          left: 32px;
          right: 32px;
          z-index: 1;
          overflow: hidden;
        }
        .header-text {
          display: flex;
          width: 100%;
          height: 100%;
          align-items: center;
          justify-content: center;
          border-radius: 3px;
        
          &.selectable:hover {
            cursor: pointer;
            background-color: #ced4da;
          }
        }
      }
    
      .neo-datepicker-content {
        position: relative;
        overflow: hidden;
        transition: all ease 0.2s;
    
        table {
          width: 220px;
          border-collapse: separate;
          border-spacing: 1px;
          table-layout: fixed;
          margin: 2px;
      
          th {
            text-align: center;
            padding: 2px;
            border: none;
          }
          td {
            border: none;
            text-align: center;
            padding: 2px;
            width: 30px;
            border-radius: 3px;
            
            &.outside-month {
              color: #999;
            }
    
            &.disabled {
              color: #bbb;
              text-decoration: line-through;
            }
      
            &.selectable:hover {
              cursor: pointer;
              background-color: adjust-color($primary, $lightness: 15%);
              color: #fff;
            }
      
            &.today {
              border: 1px solid $primary;
            }
      
            &.selected, &.selected:hover {
              background-color: $primary;
              color: #fff;
            }
          }
      
        }
      
        table.month-view {
          margin: 8px 5px;
      
          td {
            padding: 13px 0px;
          }
        }
      
        table.year-view {
          margin: 5px 8px;
      
          td {
            padding: 8px 0px;
          }
        }
      }
    }
    
    .neo-datepicker-animate {
      transition: transform ease 0.2s, opacity ease 0.2s;
    }

  /* Make the date picker larger on phones */
  @media (max-width: 576px) {
    .neo-datepicker-container {
      .neo-datepicker-popup {
          .neo-datepicker-header {
              background: #e9ecef;
              position: relative;
              height: 40px;

              button {
                padding: 5px 4px;
                width: 40px;
                border: none;
                background: none;
          
                &:not(:disabled):hover {
                  background-color: #ced4da;
                }
              }
          }
        .neo-datepicker-content {

          table {
            width: 320px;
        
            th {
              text-align: center;
              padding: 4px;
              border: none;
            }
            td {
              padding: 5px;
              width: 34px;
            }
          }
          table.month-view {
            margin: 8px 5px;
        
            td {
              padding: 24px 12px;
            }
          }
        
          table.year-view {
            margin: 5px 8px;
        
            td {
              padding: 16px 10px;
            }
          }
        }
      }
    }
  }
}