// Variables
@import '../styles/variables';
@import '../styles/mixins';
@import '../styles/utilities';
@import '../styles/base';

$shadow-color: rgba(0, 0, 0, 0.1);

qeydar-date-picker-popup {
  * {
    font-family: inherit;
    font-weight: 400;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

  &.up .date-picker-popup {
    bottom: 100%;
    margin-bottom: 5px;
  }

  &.down .date-picker-popup {
    top: 100%;
    margin-top: 5px;
  }

  .date-picker {
    &-popup {
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      box-shadow: 0 2px 10px $shadow-color;
      overflow: hidden;
      z-index: 1000;
      width: fit-content;
      border: 1px solid $dp-color-border;
      background: $dp-color-surface;
    }
  
    &-content {
      display: flex;
      flex-direction: row;
      max-height: 295px;
    }
  
    &-footer {
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .calendar {
    padding: 10px 15px 15px;
    flex-grow: 1;
    background: $dp-color-surface;
    width: 280px;
    max-width: 280px;
  }
}
