.popup-date-picker {
  $parent: ".popup";

  #{$parent} {
    &-container {
      // max-width: 300px;
      // max-height: 424px;
      min-width: 300px;
      padding: 12px 14px;  
    }

    &-header {
      margin-left: 6px;
      margin-top: 4px;  
      margin-bottom: 1.375rem;
      // flex: 0 0 auto;
    }

    &-title {
      font-weight: 500;
      font-size: 20px;  
    }

    &-buttons {
      flex-direction: row;
      order: 2;
      margin-right: -2px;
      
      & button + button {
        margin-left: 9px;
        margin-top: 0;
      }
    }
  }
  
  .date-picker {
    &-controls {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .date-picker-month-title {
        font-size: 14px;
        font-weight: 500;
      }
    }

    &-prev {
      transform: rotate(90deg);
    }

    &-next {
      transform: rotate(-90deg);
    }

    &-prev, &-next {
      &:disabled {
        visibility: hidden;
      }
    }

    &-months {
      margin-top: 7px;
      margin-bottom: 1.5rem;
    }

    &-month {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      width: 100%;
      justify-content: center;

      span, .btn-icon {
        // justify-self: center;
        // width: 40px;
        // height: 40px;
        // font-size: 1rem;
        // color: #707579;
        // display: flex;
        // justify-content: center;
        // align-items: center;
        justify-self: center;
        width: 38px;
        height: 38px;
        font-size: 12px;
        color: #707579;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .btn-icon:not(:disabled) {
        color: #000;
      }

      .btn-icon.active {
        color: #fff;
        border-radius: 50%;
        background-color: $color-blue;
      }
    }
  }
}