@prefix: ~'.ml-datetime-picker';

@{prefix} {
  width: 100%;
  &-header {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0 16px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    &-icon {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &-title {
      gap: 0 4px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 40px;
    }
  }
  &-body {
    @{prefix}-cell {
      flex: 1;
      padding: 12px;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--info-color-5);
      &-today {
        position: relative;
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          display: block;
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background-color: var(--primary-color-6);
        }
      }
      &-in-view {
        color: var(--info-color-7);
      }
      &-selected {
        color: var(--primary-color-7);
        background-color: var(--primary-color-1);
        &::after {
          display: none;
        }
      }
      &-disabled {
        color: var(--info-color-5);
        background-color: var(--info-color-1);
      }
    }
  }
}