@import "../../../style/index.less";

.cc_restaurant_calendar_wrap {
  @blue-color: #1677ff;
  @green-color: #0FB964;
  @red-color: #f5222d;
  &.dark {
    @base-color: #009dff;
    @green-color: #13f97a;
    @red-color: #ff5861;
  }
  .cc_restaurant_calendar_title_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap:16px;
    .cc_restaurant_calendar_title_item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 28px;
      border-radius: 8px;
      padding: 0 8px;
      &.blue {
        background: fade(@blue-color, 10);
      }
    }
  }
  .cc_restaurant_calendar_dot {
    width: 8px;
    height: 8px;
    background: @blue-color;
    border-radius: 50%;
    &.gray {
      background: #b9b9b9;
    }
  }
  .cc_restaurant_calendar {
    &-status-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 28px;
      border-radius: 4px;
      background: fade(@green-color, 10);
      font-size: 14px;
      color: @green-color;
      gap: 8px;

      &-error {
        background: fade(@red-color, 10);
        color: @red-color;
      }
    }
    &-content {
      padding: 8px;
      background: fade(@green-color, 10);
      border-radius: 8px 8px 8px 8px;
      color: var(--info-color);
      display: flex;
      gap: 8px;
      flex-direction: column;
      &-value {
        color: var(--gray-color);
      }
      &-item, &-value {
        height: 14px;
        line-height: 14px;
      }
    }

    &-dot {
      position: absolute;
      right: 32px;
      top: 12px;
    }

    &-index-wrap {
      display: flex;
      align-items: center;
      gap: 4px;
      position: absolute;
      left: 8px;
      top: 4px;
      color: var(--label-color);
      pointer-events: auto;
    }
  }
}



