.icon-block {
  border-radius: (2em / $global-size);
  display: inline-flex;
  vertical-align: middle;
  height: (50em / $global-size);
  width: (50em / $global-size);
  justify-content: center;
  align-items: center;
}

.icon-over-input-left{
  position: relative;
  span{
    position: absolute;
    z-index: 5;
    color: $mint;
    font-size: (14em / $global-size);
    line-height: (17 / 14);
    left: (12em / $global-size);
    top: 50%;
    transform: translateY(-50%);
    &.is-over-input-icon {
      color: $charcoal;
      top: 22px;
      transform: none;
    }
  }
  input, input:focus{
    padding-left: (30em / 14);
  }
}

.icon-over-input-right{
  position: relative;
  span{
    position: absolute;
    z-index: 5;
    font-size: (14em / $global-size);
    line-height: (17 / 14);
    top: 50%;
    right: (12em / $global-size);
    transform: translateY(-50%);
  }
  &.mint {
    color: $mint;
  }
  &.grey {
    color: $grey;
  }
  &.light-grey {
    color: $light-grey;
  }
}

.icon-over-input-left-no-header {
  position: relative;
  span {
    position: absolute;
    font-size: (14em / 16);
    top: 50%;
    transform: translateY(-90%);
    left: (12em / 14);
    line-height: (17em / 14);
    z-index: 5;
    color: $light-grey;
  }
  input, input:focus {
    padding-left: (38em / 16);
  }
}

.icon-text {
  font-size: 14px;}
.padding-left-24 {
  padding-left: 24px;
}