input[type="text"] {
  border: solid 1px color("grey");
  width: 100%;
  padding-left: 10px;
  height: 40px;

  &:focus {
    border-left: solid 3px theme-color("charcoal");
    outline: none;
  }
}

input[type="submit"] {
  @extend .button;
  margin-bottom: 0;
}

.pink-theme {
  input[type="text"] {
    &:focus {
      border-left-color: theme-color("pink");
    }
  }
}

.green-theme {
  input[type="text"] {
    &:focus {
      border-left-color: theme-color("green");
    }
  }
}

.red-theme {
  input[type="text"] {
    &:focus {
      border-left-color: theme-color("red");
    }
  }
}

.blue-theme {
  input[type="text"] {
    &:focus {
      border-left-color: theme-color("blue");
    }
  }
}

.yellow-theme {
  input[type="text"] {
    &:focus {
      border-left-color: theme-color("yellow");
    }
  }
}

.purple-theme {
  input[type="text"] {
    &:focus {
      border-left-color: theme-color("purple");
    }
  }
}

.pink-theme {
  input[type="text"] {
    &:focus {
      border-left-color: theme-color("pink");
    }
  }
}

.green-theme {
  input[type="text"] {
    &:focus {
      border-left-color: theme-color("green");
    }
  }
}

.red-theme {
  input[type="text"] {
    &:focus {
      border-left-color: theme-color("red");
    }
  }
}

.blue-theme {
  a,
  a:active,
  a:visited {
    color: theme-color("blue");
  }

  input[type="text"] {
    &:focus {
      border-left-color: theme-color("blue");
    }
  }
}

.yellow-theme {
  a,
  a:active,
  a:visited {
    color: theme-color("yellow");
  }

  input[type="text"] {
    &:focus {
      border-left-color: theme-color("yellow");
    }
  }
}

.purple-theme {
  a,
  a:active,
  a:visited {
    color: theme-color("purple");
  }

  input[type="text"] {
    &:focus {
      border-left-color: theme-color("purple");
    }
  }
}