@import '../../styles/abstracts/variables';

.calendar-container {
  margin: 0 calc((100% - 64px) / 7 / 2 * -1);

  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
  }

  &__table {
    width: 100%;
    table-layout: fixed;
    min-height: 350px;

    .month-slot {
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

      &:hover {
        background-color: $grey;
      }
    }

    & tbody {
      min-height: 350px;
    }

    & tbody > tr > td {
      text-align: center;
      cursor: default;
      height: 50px;
    }

    .day-content {
      user-select: none;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      &__title {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        position: relative;

        .ant-typography {
          line-height: 17px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      &__dot {
        position: absolute;
        left: 50%;
        bottom: -7px;
        width: 4px;
        height: 4px;
        background-color: $blue;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .disabled-day {
      .day-content__title {
        opacity: 0.4;
      }
    }

    .selected-day {
      .day-content__title {
        background-color: $blue;
        > span {
          color: $white;
        }
      }
    }
  }
}