.k-popup:has(.k-calendar) {
  margin-top: 10px;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 9px 28px 8px rgba(0 0 0 / 0.05),
  0 3px 6px -4px rgba(0 0 0 / 0.12),
  0 6px 16px 0 rgba(0 0 0 / 0.08);
  background-color: var(--ui-kit-color-white);

  .k-calendar {
    border: none;

    &-title {
      padding: 6px 8px;
      color: var(--ui-kit-color-grey-10);
      font-weight: 400;
      line-height: 20px;
      border-radius: 4px;
      border: none;

      &:hover {
        background: var(--ui-kit-color-grey-13);
      }
    }

    &-header {
      padding: 0 0 10px;
      color: var(--ui-kit-color-grey-10);
      font-size: 14px;
      border-bottom: 1px solid var(--ui-kit-color-grey-11);
    }

    &-nav-prev,
    &-nav-next {
      padding: 0;
      width: 32px;
      height: 32px;
      color: var(--ui-kit-color-grey-12);

      &:before {
        opacity: 0;
      }

      &:hover {
        color: var(--ui-kit-color-hover);
      }
    }

    &-nav-today {
      display: flex;
      align-items: center;
      padding: 0 8px;
      color: var(--ui-kit-color-grey-10);

      &:hover {
        color: var(--ui-kit-color-hover);

        &:before {
          opacity: 0;
        }
      }
    }

    .k-calendar-table {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 3px 8px;
    }

    .k-calendar-view {
      padding: 10px 0 0;
      gap: 16px;
      box-sizing: border-box;
      min-height: auto;
      width: auto;
    }

    .k-calendar-tbody {
      display: flex;
      flex-direction: column;
      row-gap: 16px;
    }

    .k-calendar-tr {
      display: flex;
      gap: 16px;
    }

    .k-calendar-td {
      width: auto;
      height: auto;
      border-radius: 6px;

      &.k-today {
        .k-link {
          color: var(--ui-kit-color-main);
          background: var(--ui-kit-color-grey-13);
        }
      }

      &:hover {
        .k-link {
          border: none;
          background: var(--ui-kit-color-grey-13);
        }
      }

      &:focus {
        .k-link {
          box-shadow: none;
        }
      }

      &.k-other-month {
        .k-link {
          color: var(--ui-kit-color-grey-12);
        }
      }

      &.k-focus {
        .k-link {
          box-shadow: none;
        }
      }

      &.k-range-mid {
        background: var(--ui-kit-color-selected);

        .k-link {
          color: var(--ui-kit-color-main);
        }
      }

      &.k-range-split {
        &-start,
        &-end {
          &::after {
            display: none;
          }
        }
      }
    }

    .k-link {
      padding: 0;
      width: 54px;
      height: 24px;
      color: var(--ui-kit-color-grey-10);
      border-radius: 6px;
    }

    .k-calendar-th {
      width: 24px;
      height: 22px;
      color: var(--ui-kit-color-main);
      font-size: 14px;
      text-transform: capitalize;
    }

    .k-calendar-monthview {
      .k-link {
        width: 24px;
      }

      .k-calendar-tbody {
        display: flex;
        flex-direction: column;
        row-gap: 6px;
      }

      .k-calendar-td {
        &.k-today {
          .k-link {
            color: var(--ui-kit-color-grey-10);
            border: 1px solid var(--ui-kit-color-main);
            background: var(--ui-kit-color-white);
          }
        }

        &.k-selected {
          .k-link {
            color: var(--ui-kit-color-white);
            border: none;
            background: var(--ui-kit-color-main);
            box-shadow: none;
          }
        }

        &.k-empty {
          width: 24px;
          height: 24px;
        }
      }
    }

    .k-calendar-yearview,
    .k-calendar-decadeview,
    .k-calendar-centuryview {
      .k-calendar-td.k-empty {
        width: 54px;
        height: 24px;
      }
    }
  }
}