/* components/form-picker/form-picker.wxss */
.form-picker {
  &__header {
    display: flex;
    align-items: center;
    height: 116rpx;

    .title {
      flex: 1;
      text-align: center;
      font-weight: 600;
      font-size: 36rpx;
      color: var(--td-text-color-primary);
    }

    .btn {
      font-size: 32rpx;
      padding: 32rpx;

      &--cancel {
        color: var(--td-text-color-secondary);
      }

      &--confirm {
        color: var(--primary-color);
      }
    }
  }

  &__content {
    padding: 0 12px;
    box-sizing: border-box;
  }
}


.card {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
  font-size: 28rpx;
  text-align: center;
  border-radius: 12rpx;
  overflow: hidden;
  box-sizing: border-box;
  background-color: var(--td-bg-color-secondarycontainer);
  border: 1px solid var(--td-bg-color-container, #fff);

  &--active {
    border-color: var(--td-bg-color-container, #9ea1a5);

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 0;
      height: 0;
      border-width: 28px 28px 28px 0;
      border-style: solid;
      border-color: var(--td-bg-color-container) transparent transparent transparent;
      border: 14px solid var(--td-bg-color-container, #0052d9);
      border-bottom-color: transparent;
      border-right-color: transparent;
    }
  }

  &--disabled {
    opacity: 0.5;
  }

  &__icon {
    color: var(--primary-color, #fff);
    position: absolute;
    left: 1.5px;
    top: 1.5px;
    z-index: 1;
  }
}

.input-wrapper {
  box-sizing: border-box;

  input {
    padding: 0 8px;
    height: 100%;
    text-align: left;
    border: 1px solid #2A2A2A;
    border-radius: 4px;
  }
}