
.app-calendar {
  width: var(--wm-calendar-width);
  min-height: var(--wm-calendar-min-height);
  box-shadow: var(--wm-calendar-wrapper-shadow);
  border-style: var(--wm-calendar-wrapper-border-style);
  border-radius: var(--wm-calendar-wrapper-border-radius);
  border-color: var(--wm-calendar-wrapper-border-color);
  border-width: var(--wm-calendar-wrapper-border-width);
  background-color: var(--wm-calendar-wrapper-background);

  .fc {
    .fc-toolbar.fc-header-toolbar {
      padding: var(--wm-calendar-header-padding);
      background-color: var(--wm-calendar-header-background-color);
      border-color: var(--wm-calendar-header-border-color);
      border-width: var(--wm-calendar-header-border-width);
      border-style: var(--wm-calendar-header-border-style);

      .fc-toolbar-title {
        //the change shouldnt be displayed in web so not mapped tokens here
      }
    }

    table tbody tr th {
      border-width: var(--wm-calendar-weekday-border-width);
      border-style: var(--wm-calendar-weekday-border-style);
      padding: var(--wm-calendar-weekday-padding);
      background-color: var(--wm-calendar-weekday-background-color);
      border-color: var(--wm-calendar-weekday-border-color);

      .fc-col-header-cell a {
        color: var(--wm-calendar-weekday-text-color);
        font-weight: var(--wm-calendar-weekday-text-font-weight);
        font-family: var(--wm-calendar-weekday-text-font-family);
        font-size: var(--wm-calendar-weekday-text-font-size);
      }
    }

    .fc-daygrid-day-top {
      background-color: var(--wm-calendar-daywrapper-background);
      border-color: var(--wm-calendar-daywrapper-border-color);
      border-width: var(--wm-space-1);
      border-style: var(--wm-border-style-solid);
      border-radius: 100%;

      a {
        color: var(--wm-calendar-day-color);
        font-size: var(--wm-calendar-day-font-size);
        font-weight: var(--wm-calendar-day-font-weight);
        font-family: var(--wm-calendar-day-font-family);
        border-color: var(--wm-calendar-day-border-color);
      }
    }

    .fc-day-today {
      .fc-daygrid-day-top {
        border-color: var(--wm-calendar-today-border-color);
        background-color: var(--wm-calendar-today-background-color);

        .a {
          background-color: var(--wm-calendar-today-text-background-color);
        }
      }

    }
  }
}