@import '../../mixins.less';
@import '../../vars.less';

.tools {
  pointer-events: all;
  margin-top: 77px;

  .group {
    border-bottom: solid 1px @color-active;
    background-color: @color-input-bg;
    height: 48px;
    display: flex;
    align-items: center;
  }

  .divider {
    height: 27px;
    width: 2px;
    background: rgba(49, 212, 213, .5);
  }

  .select {
    width: 92px;
    :global {
      .ant-select-selector {
        background: transparent !important;
        color: #ffffff;
        border: none;
        .ant-select-selection-item {
          font-size: 20px;
          color: #ffffff;
          opacity: 1 !important;
        }
      }
      .ant-select-selection-search-input, .ant-select-selection-placeholder {
        font-size: 20px;
      }
    }
  }
}

.selectInput :global(.ant-select-arrow)  {
  font-size: 22px;
  top: 11px;
  width: auto;
}

.dropdown {
  border: solid 1px rgba(49, 212, 213, 0.6);
  margin-top: 50px;
  padding: 16px 0;
  :global {
    .ant-select-item {
      font-size: 20px;
    }
  }
}

// FIXME: 有异常
.input :global(.ant-input-affix-wrapper), .input :global(.ant-select-selector) {
  width: 407px;
  background: transparent;
  color: @color-normal;
  border: none;
  padding-top: 0;
  &:active,
  &:focus {
    box-shadow: none;
    outline: none;
  }
  :global {
    .ant-input {
      background-color: transparent;
      color: @color-active;
      font-size: 20px;
      color: #ffffff;
      &::placeholder {
        color: #ffffff;
        font-size: 20px;
      }
    }
    .ant-input-search-icon::before {
      border: none;
    }
    .ant-input-group-addon {
      background-color: transparent !important;
      border: none;
      button {
        background-color: transparent !important;
        border: none;
      }
    }
    .ant-btn .anticon {
      color: @color-active;
      font-size: 24px;
    }
  }
}

.checkbox {
  :global {
    .ant-checkbox-group-item {
      margin-right: 40px;
    }
    .ant-checkbox-wrapper {
      font-size: 24px;
      color: #ffffff;
    }
    .ant-checkbox-checked {
      .ant-checkbox-inner {
        background-color: transparent;
        border-color: #00ffd5;
      }
    }
    .ant-checkbox-inner {
      background-color: transparent;
      border: solid 1px #d9d9d9;
      width: 24px;
      height: 24px;
      &::after {
        width: 8px;
        height: 14px;
      }
    }
  }
}

.date {
  background-color: rgba(36, 212, 213, 0.4);
  padding: 5px;
  font-size: 16px;
}

.detailDropdown {
  width: 400px !important;
  :global {
    .ant-select-item {
      font-size: 20px;
      padding: 8px 15px;
    }
  }
}

:global {
  .ant-select-item-option-active:not(.ant-select-item-option-disabled),
  .ant-select-dropdown {
    background-color: rgba(0, 0, 0, 1);
  }
  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
    background-color: #434343;
  }
}

.detailDropdown.isNormal {
  width: 160px !important;
  :global {
    .ant-select-item {
      font-size: 14px;
    }
  }
}
.dropdown.isNormal {
  :global {
    .ant-select-item {
      font-size: 14px;
    }
  }
}

:global(.normal-screen) {
  .tools {
    margin-top: 110px;
  }
  .select {
    :global {
      .ant-select-selection-search-input, .ant-select-selection-placeholder, .ant-select-selection-item {
        font-size: 26px !important;
      }
    }
  }
  .group {
    transform: scale(1.5);
    transform-origin: top left;
  }
}
