.vm-button
  --button-margin-top 2rem

.vm-field
  --bg-color white
  --text-color #434343
  --scroll-color white
  --font-size 1rem
  --placeholder-color #cecece
  --field-height 46px
  --field-margin 10px
  --padding 1rem
  --border-radius 5px
  --border-color #009efb
  --border-width 1px
  --label-color white
  --right-icon-width 40px
  --message-color gray

  --select-icon-size 1em
  --select-container-bg white
  --select-container-height 200px
  --select-container-border-top white
  --select-container-border var(--border-color)
  --select-option-bg-hover #c0c0c0
  --select-option-color-hover white
  --select-option-circle-bg-action var(--validation-success)
  --select-option-height 40px

  --checkbox-circle-bg transparent
  --checkbox-circle-bg-checked var(--validation-success)

  --validation-default #c0c0c0
  --validation-success #1ed700
  --validation-error #e00000
  --validation-warn #ffa500

  --calendar-day-circle-selected-color var(--border-color)
  --calendar-day-text-selected-color white
  --calendar-separator-color var(--border-color)

  --textarea-padding-vertical .4rem

  display: flex
  flex-direction: column
  align-items: flex-start
  font-size var(--font-size)
  color var(--text-color)

  &.center
    display flex
    justify-content center

  &.transparent
    --bg-color transparent
    --field-margin 0

  &.disabled
    opacity .5

  & + .vm-button
    margin-top var(--button-margin-top)

  *
  *:after
  *:before
    box-sizing border-box

  &:not(:last-child)
    margin-bottom: var(--field-margin)

  input[type='checkbox']
    appearance checkbox
    margin-right var(--field-margin)

  .vm-input-block
    display: flex
    align-items: stretch
    width 100%
    position relative

  .vm-input
    border-color var(--border-color)
    background-color var(--bg-color)
    border-style solid
    border-width var(--border-width)
    font-size 1em
    height var(--field-height)
    outline none
    padding 0 var(--padding)
    text-decoration none
    white-space nowrapReversed
    width 100%
    transition all .1s
    color currentColor
    border-radius var(--border-radius)
    font-weight 600
    z-index 2
    position relative

    &.validator
      padding-right: var(--right-icon-width)

    &:-webkit-outer-spin-button
    &:-webkit-inner-spin-button
      appearance none
      display none
      margin 0

    &:-webkit-autofill
      // Прозрачный background при автозаполнении в Chrome
      transition background-color 86400s ease-in-out 0s
      -webkit-box-shadow 0 0 0 1000px transparent inset
      -webkit-text-fill-color var(--text-color) !important

    /* webkit */
    &::-webkit-input-placeholder {
      color: var(--placeholder-color);
      opacity: 1;
    }
    /* Firefox 19+ */
    &::-moz-placeholder {
      color: var(--placeholder-color);
      opacity: 1;
    }
    /* Firefox 18- */
    &:-moz-placeholder {
      color: var(--placeholder-color);
      opacity: 1;
    }
    /* IE */
    &:-ms-input-placeholder {
      color: var(--placeholder-color);
      opacity: 1;
    }

  .vm-textarea
    display block
    line-height 1.5
    min-height 7.1em
    padding var(--textarea-padding-vertical) var(--padding)
    resize none
    width 100%

    + .vm-validator
      top: 20px

  .vm-label
    color var(--label-color)
    font-weight bold
    margin-left: var(--padding)
    font-size: .9em;
    margin-bottom 5px

  .vm-field-message
    font-size 14px
    font-weight normal
    margin-left: var(--padding)
    color var(--message-color)

    &::before
      content: '*'
      color red

  .vm-icon
    flex none
    font-size 1em
    width 1em
    height 1em
    margin-left .75em
    margin-right .75em
    fill: currentColor
    stroke: currentColor

    &:last-child
      margin-right 0

    &:first-child
      margin-left 0

  .vm-show-select
    &-enter-active
    &-leave-active
      transition: transform .2s

    &-enter
    &-leave-to
      transform translateY(-50%) scaleY(0)