:root {
  --ti-lowcode-property-active-color: #4f77ff; // 属性被激活的颜色
  --ti-lowcode-property-hover-color: #4f77ff; // 属性被hover的颜色
  --ti-lowcode-block-video-tip-color: rgb(80, 212, 171); // 区块播放视频提示颜色
}

// tiny-vue popover 弹框样式
.tiny-popover.tiny-popper {
  color: var(--ti-lowcode-popover-color);
  background: var(--ti-lowcode-popover-bg-color);
  border: none;
  padding: 6px;
  border-radius: 6px;
  line-height: 16px;
  box-shadow: rgb(0 0 0 / 15%) 0 5px 10px;

  &[x-placement^='bottom'] {
    .popper__arrow {
      top: -6px;

      &,
      &::after {
        border-bottom-color: var(--ti-lowcode-popover-bg-color);
      }
    }
  }

  &[x-placement^='right'] {
    margin-left: 16px;

    .popper__arrow {
      left: -7px;
      border-color: transparent;

      &::after {
        border-right-color: var(--ti-lowcode-popover-bg-color);
      }
    }
  }

  &[x-placement^='top'] {
    .popper__arrow {
      &,
      &::after {
        border-top-color: var(--ti-lowcode-popover-bg-color);
      }
    }
  }

  &[x-placement^='left'] {
    .popper__arrow {
      right: -7px;

      &,
      &::after {
        border-left-color: var(--ti-lowcode-popover-bg-color);
      }
    }
  }

  &.data-source-popper {
    background: var(--ti-lowcode-tabs-bg);
    color: var(--ti-lowcode-toolbar-breadcrumb-color);
    border: 1px solid var(--ti-lowcode-tabs-border-color);
    padding: 6px 0;
    border-radius: 4px;

    &[x-placement^='bottom'] {
      .popper__arrow {
        &,
        &::after {
          border-bottom-color: var(--ti-lowcode-tabs-bg);
        }
      }
    }

    &[x-placement^='right'] {
      margin-left: 16px;

      .popper__arrow {
        left: -7px;
        border-color: transparent;

        &::after {
          border-right-color: var(--ti-lowcode-tabs-bg);
        }
      }
    }

    &[x-placement^='top'] {
      .popper__arrow {
        bottom: -7px;

        &,
        &::after {
          border-top-color: var(--ti-lowcode-tabs-bg);
        }
      }
    }

    &[x-placement^='left'] {
      .popper__arrow {
        right: -7px;

        &,
        &::after {
          border-left-color: var(--ti-lowcode-tabs-bg);
        }
      }
    }

    &.data-remote-popper {
      background: var(--ti-lowcode-toolbar-view-hover-bg);
      border-color: var(--ti-lowcode-toolbar-border-color);

      &[x-placement^='bottom'] {
        .popper__arrow {
          &,
          &::after {
            border-bottom-color: var(--ti-lowcode-toolbar-view-hover-bg);
          }
        }
      }

      &[x-placement^='right'] {
        margin-left: 16px;

        .popper__arrow {
          left: -7px;
          border-color: transparent;

          &::after {
            border-right-color: var(--ti-lowcode-toolbar-view-hover-bg);
          }
        }
      }

      &[x-placement^='top'] {
        .popper__arrow {
          bottom: -7px;

          &,
          &::after {
            border-top-color: var(--ti-lowcode-toolbar-view-hover-bg);
          }
        }
      }

      &[x-placement^='left'] {
        .popper__arrow {
          right: -7px;

          &,
          &::after {
            border-left-color: var(--ti-lowcode-toolbar-view-hover-bg);
          }
        }
      }

      li {
        padding: 4px 10px;
        font-size: 12px;

        &:hover {
          background: var(--ti-lowcode-canvas-wrap-bg);
          cursor: pointer;
        }
      }
    }

    li {
      cursor: pointer;
      color: var(--ti-lowcode-toolbar-breadcrumb-color);
      padding: 4px 8px;
      transition: 0.3s;

      &:hover {
        color: var(--ti-lowcode-tootip-input-color);
        background: var(--ti-lowcode-toolbar-active-bg);
      }
    }
  }

  &.lowcode {
    background: var(--ti-lowcode-custom-popover-bg-color);
    border: 1px solid var(--ti-lowcode-custom-popover-border-color);
    color: var(--ti-lowcode-custom-popover-text-color);

    .popper__arrow,
    .popper__arrow::after {
      border-bottom-color: var(--ti-lowcode-custom-popover-bg-color);
    }

    .languageContent {
      width: 100%;
    }
  }

  &.option-popper {
    background: var(--ti-lowcode-popover-bg-color);
    border: 1px solid var(--ti-lowcode-popover-option-popper-border-color);
    color: var(--ti-lowcode-toolbar-breadcrumb-color);

    &[x-placement^='bottom'] {
      .popper__arrow {
        &,
        &::after {
          border-bottom-color: var(--ti-lowcode-popover-bg-color);
        }
      }
    }

    &[x-placement^='right'] {
      margin-left: 16px;

      .popper__arrow {
        left: -7px;
        border-color: transparent;

        &::after {
          border-right-color: var(--ti-lowcode-popover-bg-color);
        }
      }
    }

    &[x-placement^='top'] {
      .popper__arrow {
        &,
        &::after {
          border-top-color: var(--ti-lowcode-popover-bg-color);
        }
      }
    }

    &[x-placement^='left'] {
      .popper__arrow {
        right: -7px;

        &,
        &::after {
          border-left-color: var(--ti-lowcode-popover-bg-color);
        }
      }
    }

    .add-options {
      &.top {
        border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);
        margin-bottom: 15px;
        overflow: hidden;
        display: flex;
        height: 26px;
        justify-content: space-between;
        align-items: center;
        padding: 6px;

        .title {
          font-weight: 600;
        }

        .icon-close {
          margin-bottom: 4px;
          margin-right: 0px;
        }
      }

      .demo-form {
        padding: 6px;

        .tiny-form-item {
          margin-bottom: 4px;

          :deep(.tiny-form-item__label) {
            color: var(--ti-lowcode-toolbar-breadcrumb-color);
          }

          :deep(.tiny-input__inner) {
            color: var(--ti-lowcode-tootip-input-color);
            background: var(--ti-lowcode-tootip-input-background-color);
            border-color: var(--ti-lowcode-tootip-input-border-color);

            &:focus {
              border-color: var(--ti-lowcode-canvas-handle-hover-bg);
            }
          }
        }

        :deep(.btn) {
          .tiny-form-item__content {
            display: flex;

            .tiny-button {
              min-width: auto;
              flex: 1;
            }
          }
        }
      }

      .tiny-svg {
        color: var(--ti-lowcode-toolbar-breadcrumb-color);
        font-size: 14px;

        &.icon-close {
          margin: 10px;
        }

        &:hover {
          cursor: pointer;
        }

        &.header-icon {
          margin-right: 0;
        }

        &.isBind {
          color: var(--ti-lowcode-icon-bind-color);
        }
      }
    }
  }

  &.option-popper {
    padding: 2px 0;
    min-width: 6%;
    width: auto;

    .list {
      li {
        text-align: center;

        &:hover {
          background: var(--ti-lowcode-canvas-wrap-bg);
        }
      }
    }

    &.collaborator {
      padding: 0;
    }

    &.fixed-left {
      top: 24px !important;
      transform: translateX(calc(4px - var(--base-right-panel-width)));
      height: calc(100% - 36px);
    }
  }

  &.media-icon-popover {
    color: var(--ti-lowcode-media-popover-color);
    font-size: 12px;
    font-weight: 400;
    padding: 20px;

    &[x-placement^='bottom'] {
      margin-top: 16px;
    }

    .tiny-popover__title {
      color: var(--ti-lowcode-media-popover-title-color);
      font-size: 14px;
      line-height: 18px;
      font-weight: 600;
      margin-bottom: 0;
    }

    .media-title {
      color: var(--ti-lowcode-media-popover-title-color);
      display: flex;
      align-items: center;
      font-size: 14px;
      .sub-title {
        color: var(--ti-lowcode-media-popover-color);
      }
      .icon-stars {
        font-size: 16px;
        margin-right: 4px;
      }
    }

    .content {
      margin-top: 6px;
    }
  }

  &.toolbar-right-popover {
    color: var(--ti-lowcode-toolbar-hover-popper);
    font-size: 14px;
    padding: 10px 16px;
    border-radius: 6px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
      'Helvetica Neue', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    &[x-placement^='bottom'] {
      margin-top: 8px;
    }

    &.collaboration-popover[x-placement^='bottom'] {
      margin-top: 14px;
    }
    &.collaborator {
      padding: 10px 0;
    }
  }

  &.block-add-transfer-popover {
    background: var(--ti-lowcode-toolbar-bg);
    border: 1px solid var(--ti-lowcode-tabs-border-color);
    color: var(--ti-lowcode-toolbar-breadcrumb-color);
    padding: 0;

    .popper__arrow {
      display: none;
    }

    &[x-placement^='top'] {
      margin-bottom: 0;
    }

    .sort-item {
      padding: 6px 10px 6px 24px;
      transition: 0.3s;
      position: relative;

      &:hover {
        background: var(--ti-lowcode-button-hover-bg);
      }
    }
  }

  &.data-remote-popper {
    width: 12%;
  }

  &.toolbar-media-popper {
    padding: 0;
    font-size: 12px;
    border-color: var(--ti-lowcode-tabs-border-color);

    &[x-placement^='bottom'] {
      margin-top: 6px;
    }

    &[x-placement^='right'] {
      .popper__arrow {
        border-color: transparent;

        &::after {
          border-right-color: var(--ti-lowcode-toolbar-media-bg);
        }
      }
    }

    &[x-placement^='top'] {
      .popper__arrow {
        &,
        &::after {
          border-top-color: var(--ti-lowcode-toolbar-media-bg);
        }
      }
    }

    &[x-placement^='left'] {
      .popper__arrow {
        &,
        &::after {
          border-left-color: var(--ti-lowcode-toolbar-media-bg);
        }
      }
    }

    .content-wrap {
      padding: 20px;
      .title {
        width: 100%;
        color: var(--ti-lowcode-media-popover-title-color);
        background: var(--ti-lowcode-tabs-active-bg);
        display: inline-block;
        box-sizing: border-box;
        font-size: 14px;
        &.text-title {
          background: transparent;
        }
      }

      .list {
        border-bottom: 1px solid var(--ti-lowcode-tabs-border-color);

        li {
          padding: 4px 8px;
          transition: 0.3s;
          color: var(--ti-lowcode-toolbar-breadcrumb-color);

          .tiny-svg {
            margin-right: 6px;
            color: var(--ti-lowcode-toolbar-breadcrumb-color);
          }

          &:hover {
            background: var(--ti-lowcode-canvas-wrap-bg);
          }
        }
      }

      .more-setting {
        li {
          display: flex;
          align-items: center;
          gap: 8px;
          color: var(--ti-lowcode-toolbar-sub-title-color);
          padding-top: 12px;
        }
      }

      .tips {
        padding: 8px;

        span {
          display: inline-block;
          padding: 4px 8px;
          color: var(--ti-lowcode-dialog-font-color);
          background: var(--ti-lowcode-canvas-wrap-bg);
          border-left: 2px solid var(--ti-lowcode-dialog-tip-border-color);
        }
      }

      .setting {
        display: flex;
        align-items: center;
        color: var(--ti-lowcode-toolbar-sub-title-color);
        padding-top: 12px;
        & > div {
          display: flex;
          align-items: center;

          & + div {
            margin-left: 12px;
          }

          label {
            flex-shrink: 0;
            margin-right: 8px;
          }
        }

        & > span {
          width: 24px;
          height: 24px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;
          margin-left: 12px;
          border-radius: 2px;
          transition: 0.3s;

          &:hover {
            background: var(--ti-lowcode-icon-hover-bg);
            cursor: pointer;
          }

          .icon-canvas-fit {
            font-size: 16px;
            color: var(--ti-lowcode-description-minor-color);
          }
        }

        .tiny-input__suffix {
          right: 4px;

          .tiny-input__suffix-inner {
            font-size: 12px;
            color: var(--ti-lowcode-description-minor-color);
          }
        }

        .tiny-input-suffix .tiny-input__inner {
          padding-right: 20px;
          padding-left: 4px;

          &[readonly] {
            cursor: not-allowed;

            &:focus {
              border-color: var(--ti-lowcode-tabs-border-color);
            }
          }
        }
      }
    }
  }

  &.tiny-pager__selector {
    background-color: var(--ti-lowcode-common-hover-bg-1);

    .tiny-pager__selector-poplist {
      background: var(--ti-lowcode-toolbar-view-hover-bg);
      border: 1px solid var(--ti-lowcode-toolbar-border-color);
      color: var(--ti-lowcode-toolbar-breadcrumb-color);

      .list-item {
        &.select-pre.is-selected {
          background: var(--ti-lowcode-canvas-wrap-bg);
        }

        &:hover {
          color: var(--ti-lowcode-dialog-font-color);
          background-color: var(--ti-lowcode-canvas-wrap-bg);
        }
      }
    }
  }

  &.fit-popper {
    .fit-content {
      display: grid;
      gap: 8px 4px;
      grid-template-columns: 48px 1fr;
      padding: 8px;
      align-items: center;
    }

    .fit-content-label {
      color: var(--ti-lowcode-fit-label-color);
      padding: 2px;
    }

    .fit-content-main {
      place-items: start center;
      height: 64px;
      display: grid;
      gap: 4px 8px;
      grid-template-columns: auto auto;
      grid-template-rows: 1fr 3fr;
    }

    .coordinate {
      grid-column-start: 1;
      grid-row: 1 / span 3;
      width: 64px;
      height: 64px;
      background: var(--ti-lowcode-fit-coordinate-bg);
      display: inline-grid;
      overflow: hidden;
      justify-items: center;
      border-width: 1px;
      box-sizing: border-box;
      border-style: solid;
      border-color: var(--ti-lowcode-fit-coordinate-border-color);
      border-radius: 2px;
      gap: 0px;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
    }

    .coordinate-origin {
      background-color: var(--ti-lowcode-fit-coordinate-bg);
      transition: color 0.1s ease 0s;
      color: var(--ti-lowcode-fit-coordinate-origin-color);
      font-size: 19px;

      &:hover,
      &.selected {
        color: var(--ti-lowcode-fit-label-color);
      }
    }

    .input-wrap {
      grid-column-end: span 1;
      grid-row-start: 2;
      align-items: center;
      box-sizing: border-box;
      display: grid;
      gap: 4px 8px;
      grid-template-columns: auto auto;

      .left-input {
        grid-column-start: 1;
      }

      .top-input {
        grid-column-start: 2;
      }

      .left {
        color: var(--ti-lowcode-fit-label-color);
        justify-self: center;
        grid-column-start: 1;
      }

      .top {
        color: var(--ti-lowcode-fit-label-color);
        justify-self: center;
        grid-column-start: 2;
      }

      .tiny-input__inner {
        padding: 0 20px 0 4px;
      }

      .tiny-input__suffix {
        right: 4px;
      }
    }
  }

  &.grid-edit-popper {
    color: var(--ti-lowcode-toolbar-breadcrumb-color);

    .grid-edit-spacing {
      display: grid;
      gap: 8px 4px;
      grid-template-columns: 44px 1fr 24px 1fr;
      align-items: center;
      padding: 8px;

      .gap,
      .direction {
        grid-column: 1 / -1;
        display: grid;
        gap: 4px;
        grid-template-columns: 48px 1fr;
      }

      .direction {
        align-items: center;

        .radio-button {
          width: 50%;
        }
      }

      .gap-label {
        display: inline-block;
        height: 28px;
        line-height: 28px;
      }

      .gap-input {
        display: grid;
        gap: 4px;
        grid-template-columns: 1fr 24px 1fr;

        .svg-icon {
          place-self: center;
          grid-area: 1 / 2 / auto / auto;
          font-family: inherit;
          font-size: inherit;
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 24px;
          font-size: 18px;
        }

        .col {
          place-self: center;
        }

        .row {
          place-self: center;
          grid-column: 3 / -1;
        }

        .suffix {
          min-width: 18px;
        }
      }

      .dense {
        grid-column: 2 / -1;
        display: flex;
        align-items: center;

        input[type='checkbox'] {
          accent-color: var(--ti-lowcode-tootip-arrow-border-color);
        }

        label {
          margin-right: 4px;
        }
      }
    }

    .grid-edit-layout {
      padding: 8px;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
        padding-right: 4px;

        .tiny-svg {
          font-size: 16px;
        }
      }

      .text {
        margin-left: 4px;
      }

      .item-icon {
        display: none;
        color: var(--ti-lowcode-input-icon-color);

        &:hover {
          color: var(--ti-lowcode-toolbar-breadcrumb-color);
        }

        & + .item-icon {
          margin-left: 8px;
        }
      }

      .option-input {
        &:hover .item-icon {
          display: inline-block;
        }
      }

      .layout-item {
        .tiny-svg {
          margin-right: 0;
        }

        & + .layout-item {
          margin-top: 8px;
        }
      }
    }

    .is-setting {
      color: var(--ti-lowcode-style-setting-label-color);
      background-color: var(--ti-lowcode-style-setting-label-bg);
    }
  }

  &.icon-popover {
    background-color: var(--ti-lowcode-icon-popover-bg);
    filter: drop-shadow(rgba(0, 0, 0, 0.5) 0px 0px 1px) drop-shadow(rgba(0, 0, 0, 0.5) 0px 2px 4px)
      drop-shadow(rgba(0, 0, 0, 0.5) 0px 4px 12px);

    &[x-placement^='left'] {
      .popper__arrow {
        right: -6px;

        &,
        &::after {
          border-left-color: var(--ti-lowcode-icon-popover-bg);
        }
      }
    }
  }
}

// tiny-vue dialogBox 弹框样式
.tiny-dialog-box__wrapper {
  .tiny-dialog-box {
    background-color: var(--ti-lowcode-dialog-box-bg-color);
    .tiny-dialog-box__header {
      color: var(--ti-lowcode-dialog-header-color);
      background-color: var(--ti-lowcode-dialog-box-bg-color);
      .tiny-dialog-box__headerbtn {
        color: var(--ti-lowcode-dialog-close-btn-color);

        &:hover {
          color: var(--ti-lowcode-dialog-close-btn-hover-color);
        }
      }
    }

    .tiny-dialog-box__body {
      color: var(--ti-lowcode-dialog-box-body-color);

      .tiny-collapse {
        margin: 16px 0;
      }

      .tiny-collapse-item__header {
        padding: 0 8px;
        color: var(--ti-lowcode-toolbar-breadcrumb-color);
        background-color: var(--ti-lowcode-toolbar-active-bg);

        svg {
          color: var(--ti-lowcode-toolbar-breadcrumb-color);
        }
      }

      .tiny-collapse-item {
        border: none;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        background: var(--ti-lowcode-toolbar-bg);
        color: var(--ti-lowcode-toolbar-breadcrumb-color);
      }

      .tiny-collapse-item__wrap {
        background-color: var(--ti-lowcode-toolbar-view-hover-bg);
      }

      .tiny-collapse-item__content {
        color: var(--ti-lowcode-toolbar-breadcrumb-color);
        border: 1px solid var(--ti-lowcode-dialog-demo-border-color);
        border-top: none;
      }
    }
  }

  .switch-tip {
    color: var(--ti-lowcode-toolbar-breadcrumb-color);

    .icon {
      font-size: 28px;
      margin-right: 12px;
    }
  }

  &.update-page {
    .tiny-dialog-box__body {
      .tiny-input {
        margin-bottom: 10px;
        background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));

        input {
          color: var(--ti-lowcode-toolbar-breadcrumb-color);
        }
      }
    }
  }
}

// tiny-vue modal 模态框
.tiny-modal__wrapper {
  .tiny-modal__box {
    .tiny-modal__status-wrapper {
      display: none;
    }

    .tiny-modal__close-btn {
      color: var(--ti-lowcode-modal-close-btn-color);

      &:hover {
        background-color: unset;
        color: var(--ti-lowcode-modal-close-btn-hover-color);
      }
    }

    .tiny-modal__body {
      .modal-content {
        color: var(--ti-lowcode-modal-content-color);
      }
    }

    .tiny-modal__footer {
      display: flex;
      justify-content: center;

      .tiny-button--primary {
        margin-left: 8px;
      }
    }
  }

  &.status__custom {
    .tiny-modal__footer {
      .tiny-button--default {
        display: none;
      }
    }
  }
}

// tiny-vue tooltip 提示框
.tiny-tooltip.tiny-tooltip__popper {
  &.is-dark {
    color: var(--ti-lowcode-tooltip-text-color);
    background: var(--ti-lowcode-tooltip-bg-color);
    padding: 6px;
    border-radius: 2px;
    box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px;
    font-size: 14px;
  }

  &.is-error {
    background-color: var(--ti-lowcode-tooltip-error-bg-color);

    &[x-placement^='top'] {
      .popper__arrow {
        &,
        &::after {
          border-top-color: var(--ti-lowcode-tooltip-error-bg-color);
        }
      }
    }

    &[x-placement^='bottom'] {
      .popper__arrow {
        &,
        &::after {
          border-bottom-color: var(--ti-lowcode-tooltip-error-bg-color);
        }
      }
    }

    &[x-placement^='left'] {
      .popper__arrow {
        &,
        &::after {
          border-left-color: var(--ti-lowcode-tooltip-error-bg-color);
        }
      }
    }

    &[x-placement^='right'] {
      .popper__arrow {
        &,
        &::after {
          border-right-color: var(--ti-lowcode-tooltip-error-bg-color);
        }
      }
    }
  }

  &.tiny-form__valid.is-error {
    &[x-placement^='top'] {
      .popper__arrow {
        bottom: -6px;
      }
    }
  }

  &[x-placement^='top'] {
    .popper__arrow {
      &,
      &::after {
        border-top-color: var(--ti-lowcode-tooltip-bg-color);
      }
    }
  }

  &[x-placement^='bottom'] {
    .popper__arrow {
      &,
      &::after {
        border-bottom-color: var(--ti-lowcode-tooltip-bg-color);
      }
    }
  }

  &[x-placement^='left'] {
    .popper__arrow {
      &,
      &::after {
        border-left-color: var(--ti-lowcode-tooltip-bg-color);
      }
    }
  }

  &[x-placement^='right'] {
    .popper__arrow {
      &,
      &::after {
        border-right-color: var(--ti-lowcode-tooltip-bg-color);
      }
    }
  }

  &.background-type-tooltip {
    z-index: 9999999 !important;
  }
}

.tiny-popper {
  &.tiny-picker-panel {
    color: var(--ti-lowcode-dialog-font-color);
    background: var(--ti-lowcode-toolbar-view-hover-bg);
    border-color: var(--ti-lowcode-tabs-border-color);
    box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px;

    .tiny-date-picker__header-label {
      color: var(--ti-lowcode-dialog-font-color);
    }

    .tiny-date-picker__time-header {
      border-color: var(--ti-lowcode-tabs-border-color);
    }

    .tiny-picker-panel__icon-btn {
      color: var(--ti-lowcode-description-minor-color);

      &:hover {
        color: var(--ti-lowcode-toolbar-icon-color);
      }
    }

    .tiny-picker-panel__footer {
      background-color: var(--ti-lowcode-toolbar-view-hover-bg);
      border-color: var(--ti-lowcode-tabs-border-color);

      .tiny-button--text {
        color: var(--ti-lowcode-dialog-font-color);

        &:hover {
          color: var(--ti-lowcode-toolbar-icon-color);
        }
      }

      .tiny-button--primary {
        color: var(--ti-lowcode-toolbar-icon-color);
        border-color: var(--ti-lowcode-toolbar-border-color);
        background-color: var(--ti-lowcode-button-info-bg-color);

        &:hover {
          color: var(--ti-lowcode-toolbar-icon-color);
          border-color: var(--ti-lowcode-toolbar-border-color);
          background-color: var(--ti-lowcode-button-info-hover-bg);
        }
      }
    }

    .tiny-date-table {
      td.next-month,
      td.pre-month {
        color: var(--ti-lowcode-description-minor-color);

        span:hover {
          color: var(--ti-lowcode-toolbar-icon-color);
          background: var(--ti-lowcode-canvas-wrap-bg);
        }
      }

      th {
        color: var(--ti-lowcode-dialog-font-color);
      }

      td.current:not(.disabled) span {
        background-color: var(--ti-lowcode-canvas-wrap-bg);
      }

      td.available:hover span {
        color: var(--ti-lowcode-toolbar-icon-color);
        background-color: var(--ti-lowcode-canvas-wrap-bg);
      }
    }

    .tiny-time-panel {
      background: var(--ti-lowcode-toolbar-view-hover-bg);
      border-color: var(--ti-lowcode-tabs-border-color);
      box-shadow: rgb(0 0 0 / 15%) 0px 5px 10px;
    }

    .tiny-time-spinner__item {
      color: var(--ti-lowcode-description-minor-color);

      &.active:not(.disabled) {
        color: var(--ti-lowcode-toolbar-icon-color);
      }

      &:hover:not(.disabled):not(.active) {
        color: var(--ti-lowcode-toolbar-icon-color);
        background: var(--ti-lowcode-canvas-wrap-bg);
      }
    }

    .tiny-time-panel__footer {
      border-color: var(--ti-lowcode-tabs-border-color);

      .cancel {
        color: var(--ti-lowcode-dialog-font-color);
      }

      .confirm {
        color: var(--ti-lowcode-button-info-bg);
      }
    }

    .tiny-time-panel__content {
      &::after,
      &::before {
        border-color: var(--ti-lowcode-toolbar-border-color);
      }
    }
  }
}

.tiny-grid {
  svg {
    color: var(--ti-grid-primary-color);
    width: 16px;
    height: 16px;
  }
  .tiny-grid__body-wrapper {
    .tiny-grid-body__column {
      border-bottom: 0;
      cursor: pointer;
      color: var(--ti-lowcode-base-text-color);

      .tree-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .node-icon {
          margin-right: 5px;
        }
      }
    }

    .tiny-grid-body__row {
      .tiny-grid-default-input {
        background: var(--ti-lowcode-input-bg);
        color: var(--ti-lowcode-toolbar-breadcrumb-color);
      }

      &,
      &:not(.row__hover):nth-child(2n) {
        background: var(--ti-lowcode-tiny-grid-row-hover-bg);
        color: var(--ti-lowcode-toolbar-breadcrumb-color);

        &:hover {
          background: var(--ti-lowcode-toolbar-bg);
        }

        &.row__current {
          background: var(--ti-lowcode-node-current-bg);

          span {
            color: var(--ti-lowcode-toolbar-breadcrumb-color);
          }

          svg {
            color: var(--ti-lowcode-toolbar-breadcrumb-color);
          }
        }

        &.sortable-chosen {
          background: var(--ti-lowcode-node-current-bg);

          &.nodrag {
            background: var(--ti-lowcode-node-nodrag-bg);
          }
        }
      }

      &.nav-tree {
        .tiny-grid-body__column {
          height: 32px;
        }

        .tiny-grid-cell {
          display: flex;
        }
      }
    }

    .tiny-grid-tree-wrapper {
      width: 14px;

      .tiny-grid-tree__node-btn {
        font-size: 8px;
        color: var(--ti-lowcode-tree-icon-color);

        &:hover {
          color: var(--ti-lowcode-toolbar-icon-color);
        }
      }
    }
  }

  .tiny-grid__fixed-right-wrapper,
  .tiny-grid__fixed-left-wrapper {
    background-color: var(--ti-lowcode-common-bg-1);
  }

  .tiny-grid-checkbox {
    input {
      & + .tiny-grid-checkbox__icon {
        border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color);
        background-color: transparent;
        svg {
          color: var(--ti-lowcode-tiny-grid-checkbox-svg-color);
        }
      }

      &:checked + .tiny-grid-checkbox__icon {
        border: 1px solid var(--ti-lowcode-tiny-grid-checkbox-checked-border-color);

        svg {
          color: var(--ti-lowcode-common-primary-color);
          width: 100%;
          height: 100%;
        }
      }

      &[type='checkbox']:checked + .tiny-grid-checkbox__icon {
        background-color: var(--ti-lowcode-tiny-grid-checkbox-checked-bg-color);
        border-color: var(--ti-lowcode-tiny-grid-checkbox-checked-border-color);
      }
    }
    &.is__indeterminate {
      .tiny-grid-checkbox__icon svg {
        color: var(--ti-lowcode-common-primary-color);
      }
    }
  }
  .tiny-grid-radio {
    input + .tiny-grid-radio__icon > svg.icon-radio-selected {
      color: var(--ti-lowcode-tiny-radio-selected-svg-color);
    }
  }
}

.stripe-tiny-grid.tiny-grid {
  background-color: var(--ti-lowcode-common-component-bg);
  .tiny-grid {
    background-color: var(--ti-lowcode-common-component-bg);
  }

  .tiny-grid__header-wrapper {
    background-color: var(--ti-lowcode-tabs-bg);

    .tiny-grid-header__column {
      color: var(--ti-lowcode-stripe-grid-header-text-color);
      height: 39px;
    }

    .tiny-grid__repair {
      border-color: var(--ti-lowcode-tabs-border-color);
    }

    .tiny-grid-resizable.is__line:before {
      background-color: var(--ti-lowcode-toolbar-active-bg);
    }
  }

  .tiny-grid__body-wrapper {
    .tiny-grid-body__column {
      height: 44px;
    }

    .tiny-grid-body__row,
    .tiny-grid-body__row:not(.row__hover):nth-child(2n) {
      background-color: var(--ti-lowcode-stripe-grid-list-2n-bg-color);

      &:hover {
        background-color: var(--ti-lowcode-stripe-grid-list-item-hover-bg);
      }

      &.row__current {
        background-color: var(--ti-lowcode-toolbar-view-hover-bg);
      }
    }

    .tiny-grid-body__row:not(.row__hover):nth-child(2n) {
      background-color: var(--ti-lowcode-stripe-grid-list-n-bg-color);
    }
  }

  .tiny-grid__empty-text {
    color: var(--ti-lowcode-toolbar-breadcrumb-color);
  }
}

.tiny-search {
  div.tiny-search__line {
    &:hover {
      background-color: var(--ti-lowcode-search-hover-bg);
    }
    &.focus {
      .tiny-search__input-btn {
        color: var(--ti-lowcode-search-hover-icon-color);
      }
      .tiny-search__prefix svg {
        color: var(--ti-lowcode-search-hover-icon-color);
      }
    }

    .tiny-search__input-btn {
      color: var(--ti-lowcode-search-icon-color);
      &:hover {
        color: var(--ti-lowcode-search-hover-icon-color);
      }
    }
    .tiny-search__prefix svg {
      color: var(--ti-lowcode-search-icon-color);
      &:hover {
        color: var(--ti-lowcode-search-hover-icon-color);
        cursor: pointer;
      }
    }
    .tiny-search__input {
      color: var(--ti-lowcode-search-input-color);
      &::placeholder {
        color: var(--ti-lowcode-search-input-placeholder-color);
      }
    }
  }
}

.tiny-input {
  .tiny-input__inner {
    border-color: var(--ti-lowcode-input-border-color);
    background-color: var(--ti-lowcode-input-bg-color);
    color: var(--ti-lowcode-input-color);

    &:focus {
      border-color: var(--ti-lowcode-input-focus-border-color);
    }
    &::placeholder {
      color: var(--ti-lowcode-input-placeholder-color);
    }
    &:hover {
      border-color: var(--ti-lowcode-input-hover-border-color);
    }
  }

  &.is-disabled {
    .tiny-input__inner {
      border-color: var(--ti-lowcode-input-disabled-border-color);
      background: var(--ti-lowcode-input-disabled-bg-color);
    }
  }

  // 全局自定义的错误样式状态，tinyvue 那边要有错误样式必须要包一层 form、form-item
  // 所以我们这里自定义了一个类，添加这个类，就可以有错误的样式，无需包一层 form、form-item
  &.status-error {
    .tiny-input__inner {
      border-color: var(--ti-lowcode-input-error-border-color);
      background-color: var(--ti-lowcode-input-error-bg-color);
    }
  }
}

.tiny-textarea {
  border-color: var(--ti-lowcode-textarea-border-color);

  &:hover,
  &:has(.tiny-textarea__inner:focus) {
    border-color: var(--ti-lowcode-textarea-hover-border-color);
  }

  .tiny-textarea__inner {
    background-color: var(--ti-lowcode-textarea-input-bg-color);
    color: var(--ti-lowcode-textarea-input-color);
  }
}

.tiny-numeric {
  .tiny-numeric__decrease,
  .tiny-numeric__increase {
    color: var(--ti-lowcode-tiny-numeric-icon-color);

    &:hover {
      color: var(--ti-lowcode-tiny-numeric-icon-hover-color);
    }
  }
}

span.tiny-switch {
  background-color: var(--ti-lowcode-tiny-switch-bg-color);

  &.tiny-switch-checked {
    background-color: var(--ti-lowcode-tiny-switch-checked-bg-color);
  }

  &::after {
    background-color: var(--ti-lowcode-tiny-switch-dot-bg);
  }
}

.tiny-select {
  div.tiny-input {
    &.is-focus {
      .tiny-input__inner {
        border-color: var(--ti-lowcode-select-focus-border-color);
      }
    }
  }

  .tiny-select__tags {
    .tiny-tag {
      color: var(--ti-lowcode-select-tags-text-color);
      background-color: var(--ti-lowcode-select-tags-bg-color);

      .tiny-tag__close {
        color: var(--ti-lowcode-select-tags-text-color);
        &:hover {
          color: var(--ti-lowcode-select-suffix-icon-color-hover);
        }
      }
    }
  }

  .tiny-input {
    .tiny-input__inner {
      padding: 8px;
    }

    .tiny-select__caret {
      color: var(--ti-lowcode-select-tags-text-color);
    }

    .tiny-input__suffix-inner {
      &:hover {
        .tiny-select__caret {
          color: var(--ti-lowcode-select-suffix-icon-color-hover);
        }
      }
    }
  }
}

.tiny-select-dropdown {
  &.tiny-popper {
    background-color: var(--ti-lowcode-dropdown-bg-color);
    border: 1px solid var(--ti-lowcode-dropdown-border-color);

    &.select-popper {
      margin-top: 3px;

      .tiny-select-dropdown__item.tiny-option {
        width: 79px;
        height: 24px;
        line-height: 24px;
        padding: 4px 8px;
        display: flex;
        align-items: center;
      }

      .tiny-select-dropdown__list {
        padding: 4px 0;
      }

      .tiny-select-dropdown__wrap {
        min-height: 50px;
        margin-bottom: -8px !important;
        margin-right: -8px !important;
      }
    }

    .cursor-option {
      padding: 0 4px 0 12px;

      .item-icon {
        font-size: 16px;
      }

      .item-label {
        font-size: 14px;
        margin-left: 4px;
      }
    }
  }

  .tiny-select-dropdown__item {
    &.tiny-option {
      color: var(--ti-lowcode-dropdown-item-text-color);
      background-color: var(--ti-lowcode-dropdown-bg-color);

      &.hover,
      &:hover {
        background-color: var(--ti-lowcode-dropdown-item-hover-bg-color);
        color: var(--ti-lowcode-dropdown-item-hover-text-color);
      }

      &.selected {
        color: var(--ti-lowcode-dropdown-item-selected-color);
        background-color: var(--ti-lowcode-dropdown-item-selected-bg);

        & > span {
          position: relative;
        }
      }

      &.is-disabled > a {
        cursor: not-allowed;
      }
    }
  }

  &.is-multiple {
    .tiny-select-dropdown__item.tiny-option {
      &:not(.is-disabled).hover,
      &:not(.is-disabled):hover {
        color: var(--ti-lowcode-dropdown-item-hover-text-color);
        background-color: var(--ti-lowcode-dropdown-item-hover-bg-color);

        .tiny-svg {
          color: var(--ti-lowcode-dropdown-item-hover-text-color);
        }
      }

      &.is-disabled:hover {
        background-color: transparent;
      }

      &.selected {
        color: var(--ti-lowcode-dropdown-item-hover-text-color);
        background-color: transparent;
        font-weight: 600;

        .tiny-svg {
          color: var(--ti-lowcode-dropdown-item-hover-text-color);
        }

        & > span {
          padding-left: 0;

          &::before {
            content: '';
          }
        }
      }

      & > span {
        padding-left: 0;
      }
    }
  }

  .tiny-select-group__wrap {
    &:not(:last-of-type)::after {
      left: 0;
      right: 0;
      background: var(--ti-lowcode-toolbar-border-color);
    }

    .tiny-select-group__title {
      font-size: 14px;
      font-weight: 500;
      color: var(--ti-lowcode-dialog-font-color);
      background: var(--ti-lowcode-toolbar-bg);
      padding: 2px 0 2px 8px;
      margin-bottom: 2px;
    }
  }

  .tiny-tree {
    color: var(--ti-lowcode-dialog-font-color);
    background: var(--ti-lowcode-toolbar-view-hover-bg);

    .tiny-tree-node__expand-icon {
      &,
      &.expanded {
        color: var(--ti-lowcode-dialog-font-color);
      }

      &:not(.is-leaf) {
        margin-left: 12px;
        margin-right: 6px;
      }
    }

    .tiny-tree-node__content {
      &:hover {
        background-color: var(--ti-lowcode-canvas-wrap-bg);
      }
    }

    .tiny-tree-node {
      &.is-current,
      &:focus {
        & > .tiny-tree-node__content {
          background-color: var(--ti-lowcode-canvas-wrap-bg);
        }
      }
    }
  }

  &.position-origin-select {
    min-width: 72px !important;
    z-index: 9999999 !important;
  }
}

.tiny-tree {
  .tiny-tree-node__label {
    font-size: 12px;
  }
}

button {
  &.tiny-button {
    &.tiny-button--default {
      color: var(--ti-lowcode-button-default-color);
      border-color: var(--ti-lowcode-button-default-border-color);
      background-color: var(--ti-lowcode-button-default-bg);

      &:hover {
        color: var(--ti-lowcode-button-default-hover-color);
        border-color: var(--ti-lowcode-button-default-hover-border-color);
        background-color: var(--ti-lowcode-button-default-hover-bg);
      }

      &.is-disabled {
        color: var(--ti-lowcode-button-default-disabled-color);
        border-color: var(--ti-lowcode-button-default-disabled-border-color);
        background-color: var(--ti-lowcode-button-default-disabled-bg);
      }
    }

    &.tiny-button--info {
      color: var(--ti-lowcode-button-info-color);
      border-color: var(--ti-lowcode-button-info-border-color);
      background-color: var(--ti-lowcode-button-info-bg-color);

      &:hover {
        color: var(--ti-lowcode-button-info-hover-color);
        border-color: var(--ti-lowcode-button-info-hover-border-color);
        background-color: var(--ti-lowcode-button-info-hover-bg-color);
      }
    }
    &.tiny-button--primary {
      color: var(--ti-lowcode-button-primary-color);
      border-color: var(--ti-lowcode-button-primary-border-color);
      background-color: var(--ti-lowcode-button-primary-bg-color);

      &:hover {
        color: var(--ti-lowcode-button-primary-hover-color);
        border-color: var(--ti-lowcode-button-primary-hover-border-color);
        background-color: var(--ti-lowcode-button-primary-hover-bg-color);
      }
    }
  }
}

.tiny-button-group {
  ul.tiny-group-item {
    border: 1px solid var(--ti-lowcode-tabs-border-color);
    border-radius: 2px;

    li {
      background-color: var(--ti-lowcode-canvas-wrap-bg);

      &.active {
        &:hover button:not(.disabled),
        button:not(.disabled) {
          background: var(--ti-lowcode-tabs-bg);
          border-color: var(--ti-lowcode-tabs-bg);
          color: var(--ti-lowcode-toolbar-icon-color);
        }
      }

      &:hover {
        button:not(.disabled) {
          color: var(--ti-lowcode-dropdown-item-hover-text-color);
          background-color: var(--ti-lowcode-common-component-bg);
        }
      }

      &:not(:last-child) {
        margin-right: 0;
      }
    }

    button {
      background-color: var(--ti-lowcode-canvas-wrap-bg);
      color: var(--ti-lowcode-toolbar-breadcrumb-color);

      &::before {
        background: var(--ti-lowcode-tabs-border-color);
      }
    }
  }
}

.tiny-form {
  .tiny-form-item__label {
    padding-right: 8px;
    color: var(--ti-lowcode-input-label-color);
  }

  .tiny-form-item {
    &.is-error {
      margin-bottom: 20px;
    }
  }
}

.tiny-collapse {
  border-top: none;
  border-bottom: none;
  .tiny-collapse-item {
    border: none;
    // 第一项的外边距会与其他元素外边距相加形成最终外边距，因此第一项外边距不调整
    + .tiny-collapse-item {
      margin-top: 4px;
    }
    .tiny-collapse-item__header {
      padding-left: 16px;
    }
    .components-items {
      .item {
        cursor: pointer;
      }
    }
  }

  .tiny-collapse-item__header {
    color: var(--ti-lowcode-collapse-item-header-color);
    background: var(--ti-lowcode-collapse-item-header-bg-color);
    position: relative;
    min-height: 32px;
    padding-top: 5px;
    padding-bottom: 5px;

    &:hover,
    &.is-active {
      color: var(--ti-lowcode-collapse-item-header-active-color);
    }

    .tiny-collapse-item__arrow {
      line-height: 14px;
    }
  }

  .tiny-collapse-item,
  .tiny-collapse-item__wrap {
    background-color: var(--ti-lowcode-collapse-item-bg-color);
  }

  .tiny-collapse-item__content {
    color: var(--ti-lowcode-collapse-item-content-color);
    padding: 0;
    border: none;
  }

  .tiny-collapse-item__wrap {
    overflow: inherit;
  }
}

.canvas-slot-choose {
  div {
    line-height: 30px;
    text-align: center;
    color: var(--ti-lowcode-button-info-color);

    &:hover {
      background-color: var(--ti-lowcode-component-item-hover-bg);
    }
  }
}

.tiny-notify {
  .tiny-notify__close-zone {
    color: var(--ti-lowcode-notify-close-color);
    &:hover {
      color: var(--ti-lowcode-notify-close-hover-color);
    }
  }

  &.tiny-notify--error {
    .tiny-notify__icon-status {
      color: var(--ti-lowcode-base-error-color);
    }
  }

  &.tiny-notify--info {
    .tiny-notify__icon-status {
      color: var(--ti-lowcode-base-prompt-color);
    }
  }

  &.tiny-notify--success {
    .tiny-notify__icon-status {
      color: var(--ti-lowcode-base-success-color);
    }
  }

  &.tiny-notify--warning {
    .tiny-notify__icon-status {
      color: var(--ti-lowcode-base-warn-color);
    }
  }
}

.tiny-tabs {
  // tiny-tabs button-card模式宽度默认无法铺满父容器，添加此类名修改成铺满父容器
  &.full-width-tabs {
    .tiny-tabs__nav {
      float: none;
      display: flex;
      .tiny-tabs__item {
        flex: 1 1 auto;
      }
    }
  }
  &__item__title {
    text-align: center;
  }
}

.tiny-dropdown {
  &__trigger {
    color: var(--ti-lowcode-trigger-color);
    &:not(&__caret-button):hover {
      color: var(--ti-lowcode-trigger-hover-color);
    }
  }
}

.empty-wrap {
  text-align: center;
  margin-top: 20px;

  .empty-icon {
    width: 64px;
    height: 64px;
    color: var(--ti-lowcode-empty-icon-color);
  }

  .empty-text {
    margin-top: 6px;
    margin-bottom: 0;
    font-size: 12px;
    color: var(--ti-lowcode-common-text-color-5);
  }
}

.tiny-radio-group {
  .tiny-radio-button {
    &:first-child {
      .tiny-radio-button__inner {
        border-color: var(--ti-lowcode-radio-button-border-color);
      }
    }
    .tiny-radio-button__orig-radio:checked {
      & + .tiny-radio-button__inner {
        background-color: var(--ti-lowcode-tiny-radio-button-checked-bg);
        border-color: var(--ti-lowcode-radio-button-border-color);
        &:hover {
          box-shadow: none;
        }
      }
    }
    &__inner {
      background-color: var(--ti-lowcode-tiny-radio-button-bg);
      color: var(--ti-lowcode-radio-button-color);
      border-color: var(--ti-lowcode-radio-button-border-color);
    }
  }
}

.tiny-loading {
  .tiny-loading__spinner {
    margin-top: 0;
    transform: translateY(-50%);
  }
}

.global-desc-info {
  color: var(--ti-lowcode-common-text-desc-color);
}
