.vm-range-picker {
  --color: #1f1f1f;
  --border: 1px solid #dadadaff;
  --hover-color: #40a9ff;

  &.dark {
    --color: #fff;
    --border: 1px solid #1464a6 !important;
    --bg-color: rgba(0, 139, 237, 0.1) !important;
    --hover-color: white;
    .ant-picker-active-bar {
      background: #018aff;
    }
    .ant-picker-separator,
    .ant-picker-focused .ant-picker-separator {
      color: #fff !important;
    }
  }
  background-color: var(--bg-color) !important;
  border: var(--border) !important;
  border-radius: 6px;

  .ant-picker-suffix {
    color: var(--color);
  }

  &:hover {
    border-color: var(--hover-color);
  }

  .ant-picker-input {
    input {
      color: var(--color);
    }
  }

  .ant-picker-separator {
    color: var(--color);
  }

  .ant-picker-clear {
    color: var(--color);
    background: transparent;
  }
}

.vm-select,
.vm-input {
  --color: #1f1f1f;
  --bg-color: #f5f5f5;
  --hover-color: #f5f5f5;
  --border-color: #f5f5f5;

  &.dark {
    --color: #fff;
    --bg-color: #0b588e;
    --hover-color: #018aff;
    --border-color: #0b6baf;
  }

  .ant-select-selector {
    background: var(--bg-color) !important;
    border-radius: 6px !important;
    border: 1px solid var(--border-color) !important;
  }
  .ant-select-selection-placeholder {
    color: var(--color);
  }

  &:hover {
    .ant-select-selector {
      border: 1px solid var(--hover-color) !important;
    }
  }
  &.dark {
    .ant-select-selector {
      .ant-select-selection-item {
        color: white;
      }
    }

    .ant-select-arrow {
      color: white;
    }
  }
}

.vm-input {
  color: var(--color);
  background: var(--bg-color);
  border-radius: 6px;
  border: 1px solid var(--bg-color);
  &:hover {
    border: 1px solid var(--hover-color);
  }
  .ant-input {
    color: var(--color);
    background: var(--bg-color);
    border-radius: 6px;
    border: 1px solid var(--bg-color);
  }
}

.vm-select-dropdown {
  &.dark {
    background-color: #1a3e69;

    .ant-select-item {
      color: white;
    }
    .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
      background-color: RGBA(30, 92, 147, 0.5);
    }
    .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
      background: RGBA(30, 92, 147, 1);
    }
    .ant-empty-description,
    .ant-select-dropdown-empty {
      color: #74bbf4;
    }
  }
}

.vm-range-picker-dropdown {
  &.dark {
    .ant-picker-range-arrow {
      background: none;
      &::before {
        background: rgb(23 62 110);
      }
    }
    .ant-picker-panel {
      border-bottom: 1px solid #95fff933 !important;
    }
    .ant-picker-cell-disabled .ant-picker-cell-inner {
      color: #c2c2c2b3 !important;
    }
    .ant-picker-footer {
      border-top: 1px solid #95fff933 !important;
    }
    .ant-picker-panel-container {
      background: rgb(51 95 135);
      box-shadow: 0 3px 6px -4px #ffffff1f, 0 6px 16px #ffffff14,
        0 9px 28px 8px #5454540d;
      .ant-picker-header {
        border-bottom: 1px solid #95fff933;
        button {
          color: white;
          &:hover {
            color: #95fff9;
          }
        }
      }
      .ant-picker-footer {
        border-top: 1px solid #95fff933 !important;
      }
      .ant-picker-content {
        th {
          color: white;
        }
        .ant-picker-cell-inner {
          color: white;
        }
        .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
          background: rgba(40, 114, 175, 1);
        }
        .ant-picker-cell-in-view.ant-picker-cell-range-start:not(
            .ant-picker-cell-range-start-single
          )::before,
        .ant-picker-cell-in-view.ant-picker-cell-range-end:not(
            .ant-picker-cell-range-end-single
          )::before {
          background: rgba(40, 114, 175, 0.6);
        }
        .ant-picker-cell-in-view.ant-picker-cell-selected
          .ant-picker-cell-inner,
        .ant-picker-cell-in-view.ant-picker-cell-range-start
          .ant-picker-cell-inner,
        .ant-picker-cell-in-view.ant-picker-cell-range-end
          .ant-picker-cell-inner {
          background: rgba(40, 114, 175, 0.6);
        }
        .ant-picker-cell:hover:not(.ant-picker-cell-in-view)
          .ant-picker-cell-inner,
        .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(
            .ant-picker-cell-range-start
          ):not(.ant-picker-cell-range-end):not(
            .ant-picker-cell-range-hover-start
          ):not(.ant-picker-cell-range-hover-end)
          .ant-picker-cell-inner {
          background: rgba(40, 114, 175, 0.6);
        }
        .ant-picker-cell-in-view.ant-picker-cell-today
          .ant-picker-cell-inner::before {
          background: rgba(40, 114, 175, 0.6);
        }

        .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
        .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,
        .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,
        .ant-picker-cell-in-view.ant-picker-cell-range-start:not(
            .ant-picker-cell-range-start-single
          ).ant-picker-cell-range-hover-start::before,
        .ant-picker-cell-in-view.ant-picker-cell-range-end:not(
            .ant-picker-cell-range-end-single
          ).ant-picker-cell-range-hover-end::before,
        .ant-picker-panel
          > :not(.ant-picker-date-panel)
          .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before,
        .ant-picker-panel
          > :not(.ant-picker-date-panel)
          .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
          background: #07749fbb;
          border-bottom: 1px solid #95fff933;
        }

        .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start
          .ant-picker-cell-inner::after,
        .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end
          .ant-picker-cell-inner::after {
          background: #07749fbb !important;
        }
      }
    }
  }
}

.vm-filter {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 10px;
}

.vm-filter-label {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: var(--label-color);
  margin-right: 5px;
}
