.dv-data-calendar {
  position: relative;

  .dv-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .dv-data-calendar-wrap {
    display: flex;
  }
  .dv-data-calendar-index-column {
    &-label {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 $text-padding;
      border-bottom: $border-width solid transparent;
      height: $font-size-large;
      font-size: $font-size-small;
    }
  }

  .dv-data-calendar-body {
    flex: 1;

    .dv-data-calendar-header {
      display: flex;
      align-items: center;

      .dv-data-calendar-header-cells {
        flex: 1;
        display: flex;
        align-items: center;

        .dv-data-calendar-header-cell {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          height: $font-size-large;
          font-size: $font-size-small;

          &:not(:last-child) {
            border-right: $border-width solid transparent;
          }
        }
      }
    }
    .dv-data-calendar-rows {
      border: $border-width-large solid $dv-dark-border-color;

      .dv-data-calendar-row {
        display: flex;
        align-items: center;

        &:not(:last-child) {
          .dv-data-calendar-row-cell {
            border-bottom: $border-width solid $dv-dark-border-color;
          }
        }

        .dv-data-calendar-row-cells {
          flex: 1;
          display: flex;
          align-items: center;

          .dv-data-calendar-row-cell {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            height: $font-size-large;
            font-size: $font-size-small;
            position: relative;
            cursor: pointer;

            &.invalid {
              background: $dv-dark-background;
            }

            &:not(:last-child) {
              border-right: $border-width solid $dv-dark-border-color;
            }
          }
        }
      }
    }
  }

  &.dark {
    .dv-data-calendar-index-column-label {
      color: $dv-dark-secondary-text-color;
    }
    .dv-data-calendar-header-cell {
      color: $dv-dark-secondary-text-color;
    }
    .dv-data-calendar-row-cell {
      color: $dv-dark-secondary-text-color;
    }
  }
}
