raf-input {
  ion-item {
    display: block;
    width: 100%;
    min-height: 44px;
    --padding-top: 5px;
    --padding-bottom: 5px;
    --ion-color-primary: #ffffff;
  }

  ion-input {
    --placeholder-color: #b8c4cc;
    font-family: var(--theme-font-secondary);
    font-size: 18px;
    --padding-top: 10px;
    --padding-bottom: 10px;
    color: #ffffff;
  }

  ion-icon {
    color: var(--theme-green);
  }

  .boxed {
    border: 1px solid var(--theme-light-grey);
    border-radius: 3px;
    margin: 15px 0;
    padding-bottom: 15px;
    ion-item {
      border-bottom: none;
      --padding-top: 0;
      --padding-bottom: 0;
    }
    ion-input {
      font-size: 14px;
      color: #ffffff;
      --padding-bottom: 0;
      --padding-top: 0;
      --placeholder-color: #b8c4cc;
      font: var(--theme-font-secondary);
    }
    ion-label {
      margin: 6px 0 0 0;
      color: #fff;
      letter-spacing: 2px;
    }
  }

  ion-icon.left-icon {
    font-size: 28px;
  }

  .color-dark {
    --ion-color-primary: var(--theme-darker-grey);
    &.boxed {
      border-color: var(--theme-darker-grey);
    }
    .left-icon {
      color: var(--theme-darker-grey);
    }
    ion-label {
      color: var(--theme-darker-grey);
    }
    ion-input {
      color: var(--theme-black);
      --placeholder-color: var(--theme-grey);
    }
  }

  .color-primary {
    border-bottom: 1px solid var(--theme-light-text);
    ion-input {
      color: var(--theme-black);
      --placeholder-color: var(--theme-darkest-grey);
      --padding-bottom: 4px;
    }
    ion-icon {
      color: var(--theme-secondary) !important;
    }
  }

  ion-select {
    color: white;
    font-size: 16px;
    letter-spacing: 2px;
    --padding-top: 0;
    --padding-bottom: 0;
    margin-left: 0 !important;
  }

  .invalid {
    .input-wrapper {
      border-bottom-color: var(--theme-red) !important;
    }
    .label {
      color: var(--theme-red) !important;
    }
  }

  .input-icon ion-icon {
    display: block;
    position: absolute;
    right: 15px;
    top: 38px;
    height: 35px;
    width: 35px;
    svg {
      height: 30px;
      width: 30px;
    }

    &:hover {
      cursor: pointer;
    }
  }

  .geo-location {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #a1abb1;
    &:hover {
      cursor: pointer;
      color: var(--theme-primary);
    }
  }

  .left-icon {
    position: absolute;
    top: 0;
  }

  .left-icon-parent ion-label {
    margin-left: 35px !important;
  }

  .left-icon {
    font-size: 28px;
    position: absolute;
    top: 0;
  }

  .left-icon-parent ion-label {
    margin-left: 35px !important;
  }

  #card-number {
    display: block;
    width: 100%;
    border-bottom: 1px solid #ffffff;
    padding: 10px 0;
  }
}