@import '@/styles/common.less';
@import '@/styles/variables.less';

.anchor-picker {
  width: 100%;
  background: #FFFFFF;
  padding: 24px;

  &__title {
    font-size: 28px;
    line-height: 40px;
    font-weight: 400;
    color: @blColor;
    margin-top: 32px;

    &:first-child {
      margin-top: 0;
    }
  }

  &__container {
    .flex-row();
    flex-wrap: wrap;
    margin-top: 16px;
  }

  &__item {
    min-width: 164px;
    height: 64px;
    font-size: 28px;
    line-height: 64px;
    font-weight: 400;
    text-align: center;
    color: @blColor;
    background: #F6F6F6;
    margin-left: 16px;
    border-radius: 32px;

    &:first-child {
      margin-left: 0;
    }

    &.selected {
      color: @blHighlightColor;
      background: @blHighlightBg;
    }
  }

  &__input {
    width: 344px;
    height: 72px;
    font-size: 28px;
    line-height: 72px;
    font-weight: 400;
    color: @blColor;
    background: #F6F6F6;
    padding: 0 24px;
    margin-top: 16px;
    border-radius: 12px;
  }

  &__input-placeholder {
    color: @blColorG1;
  }

  &__toolbar {
    margin-top: 20px;
  }
}